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

【问题标题】：Append to closest div class (multiple divs with same class on page)附加到最近的 div 类（页面上具有相同类的多个 div）
【发布时间】：2013-05-24 11:34:40
【问题描述】：

我正在尝试将内容附加到最近的名为 ".infoCatcher" 的 div 类中，但目前它正在附加到页面上所有具有该类的 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>

感谢您的帮助！

【问题讨论】：

标签： jquery append closest

【解决方案1】：

试试.siblings。将您的代码转换为小提琴。 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>');
   });
});

【讨论】：

【解决方案2】：

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

$(this) 指点击的btnMoreInfo

【讨论】：