整蠱jQuery選擇

Question

我有這樣的HTML代碼：

<div class="image-widget-data"><span class="file"> 
    <input type="hidden" value="115" name="field_tablica[und][0][fid]"> 
    <input type="hidden" value="1" name="field_tablica[und][0][display]"> 
    <input type="hidden" value="560" name="field_tablica[und][0][width]"> 
    <input type="hidden" value="560" name="field_tablica[und][0][height]"> 
    <div class="imageeditor"> 
     <div class="editors"> 
      <div data-codename="picmonkey" 
       title="PicMonkey" 
       class="imageeditor-widget-item picmonkey imageeditor-processed"> 
      </div> 
     </div> 
    </div> 
</div> 

當DIV.picmonkey點擊我想價值從名爲field_tablica[und][0][fid]輸入，其中0可以是從0至「115」獲得9

我應該使用哪個jQuery選擇器？

Answer 1

非常相似的Poelinca Dorin's answer和阿倫P約翰尼拉評論： http://jsfiddle.net/zlatin_zlatev/0ubg7m34/

不同之處在於，我不會太依賴當前的DOM結構 - 它只需要使用類image-widget-data包裝div。

無論隱藏的輸入是直接在它下面還是在其他一些html dom元素中 - 例如，形成。

編輯：看來，.closest（）具有比.parentsUntil（）更好的性能，所以最好還是用它去http://jsperf.com/closest-vs-parentsuntil（我的回答已經成爲一致，那麼阿倫P約翰尼拉最接近更換parentsUntil後建議）

(function ($) { 
$('.picmonkey').on('click', function (e) { 
    alert($(this).closest('.image-widget-data').find('input[name$="[fid]"]').val()); 
}); 
})(jQuery); 

Answer 2

使用ends with jQuery selector像this jsfiddle example

$(function() { 
    $('.picmonkey').on('click', function (e) { 
     alert($(this).closest('.imageeditor').siblings('input[name$="[fid]"]').val()); 
    }); 
}); 

Answer 3

這應該工作：

$(".picmonkey").on("click", function() { 
    var $input = $(this) 
     .closest(".image-widget-data") 
     .find("input[name^=field_tablica\\[und\\]\\[][name$=\\]\\[fid\\]]") 
     //    ^       ^
     //    |        | 
     //    |        +-- ends with ][fid] 
     //    +----------------------------------- begins with field_tablica[und][ 
    console.log($input); 
}); 

通知的\\每個方括號之前。 As explained here：

要使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）作爲名稱的文本部分，它 必須用兩個反斜線來轉義：\\。例如，具有id="foo.bar"一個 元件，可以使用選擇器$("#foo\\.bar")

Demo Here

Answer 4

嘗試

$("[data-codename]").on("click", function() { 
    console.log($("[name*=\\[fid\\]]").val()) 
}) 

的jsfiddle http://jsfiddle.net/guest271314/aer9bmrn/2/