Question

我正在尝试将内容附加到名称为".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>

感谢您的帮助！

Answer 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>');
   });
});

Answer 2

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

$（this）指的是点击的btnMoreInfo

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

2 个答案: