jquery - 附加到最近的 div 类（页面上具有相同类的多个 div）

Question

我正在尝试将内容附加到最近的具有 name 的 div 类中".infoCatcher"，但截至目前，它正在附加到页面上具有该类的所有 div 中。

如何将此附加到最近的 div？

我有这个：

$(document).on('click', '.btnMoreInfo', function () {
    $('.item').closest('div').find('.infoCatcher').append('<div class="moreInfo info">' + '</div>');
});

和 HTML：

<ul>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
</ul>

感谢您的帮助！

Answer 1

试试.siblings。将您的代码转换为小提琴。工作版本 在这里

$(document).ready(function(){
   $(document).on('click', '.btnMoreInfo', function (e) {
       alert('Yes');
       $(e.target).siblings(".infoCatcher").append('<div class="moreInfo info">More Content..' + '</div>');
   });
});

Answer 2

$(document).on('click', '.btnMoreInfo', function () {
    $(this).closest('.infoCatcher').append('<div class="moreInfo info"></div>');
});

$(this) 指点击的 btnMoreInfo