jquery - append 到最近的 div 类(页面上具有相同类的多个 div)

Question

我正在尝试将内容 append 到名称为“.infoCatcher”的最接近的 div 类中，但截至目前，它已 append 到页面上具有该类的所有 div 中。

如何将其 append 到最近的 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 。将您的代码转换为 fiddle 。 Working version is here

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