javascript - 棘手的 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] 的输入中获取值“115”，其中 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 在用最接近的替换parentsUntil后建议的相同)

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