javascript - 在 jQuery 中最接近的不起作用

Question

当用户单击 .dropzone-upload-btn 元素时，我尝试通过 jQuery 单击 .dropzone 类。我有这段代码，但它什么也没做。知道为什么吗？

<div class="dropzone-wrapper">
  <div class="dropzone"></div>
  <div class="dropzone-upload-btn"></div>
</div>

这是 jQuery 代码(简化)

$('.dropzone-upload-btn').on("click", function() {
  return $(this).closest('.dropzone').click();
});

Answer 1

closest 查看匹配的元素及其祖先。你可能想要 sibling :

$('.dropzone-upload-btn').on("click", function() {
    return $(this).siblings('.dropzone').click();
});

引用资料:

• > http://api.jquery.com/closest/
• > http://api.jquery.com/siblings/

当然，如果您 100% 确定 .dropzone 元素将紧接在 .dropzone-upload-btn 元素之前，那么您可以使用 prev 或 prevAll:

$('.dropzone-upload-btn').on("click", function() {
    return $(this).prev('.dropzone').click();
});

引用资料:

• > http://api.jquery.com/prev/
• > http://api.jquery.com/prevAll/

prevAll 如果您知道目标元素将出现在匹配元素之前，则可以使用，但不一定立即之前。 prev 只会查看 first immediate previous sibling.

prevAll 和siblings 的区别在于siblings 看的是匹配元素之前和之后的兄弟，而 prevAll 只查看它之前的 sibling 。