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时，我想获得价值＆＃34; 115＆＃34;来自名为field_tablica[und][0][fid]的输入，其中0可以是0到9。

我应该使用什么jQuery选择器？

Answer 1

非常类似于Poelinca Dorin's answer和Arun P Johny评论：http://jsfiddle.net/zlatin_zlatev/0ubg7m34/

不同之处在于我不太依赖当前的DOM结构 - 它只需要一个带有类image-widget-data的包装div。

隐藏的输入是直接跟在它下面，还是在其他一些html dom元素中无关紧要 - 例如形式。

编辑：似乎.closest（）比.parentsUntil（）具有更好的性能，所以最好用它来http://jsperf.com/closest-vs-parentsuntil（我的答案与Arun P Johny在用最接近的父亲取代之后的建议相同）< / p>

(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

尝试

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

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

棘手的jQuery选择器

3 个答案: