最接近的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查看匹配的元素及其祖先。您可能需要siblings:

$('.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将只查看第一个直接前面的兄弟。

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