jquery - 无法将图像附加到下一个匹配的类

Question

我正在尝试将图像附加到距离单击的链接最近的另一个 div。我只想将图像附加到下一个匹配的类，而不是全部

这就是我的 html 的样子

<div id="container">

<div class="product">
<div class="link_wrap"><a class="expand">link 1</a></div>
<div class="flyer"></div>
</div

<div class="product">
<div class="link_wrap"><a class="expand">link 2</a></div>
<div class="flyer"></div>
</div

<div class="product">
<div class="link_wrap"><a class="expand">link 3</a></div>
<div class="flyer"></div>
</div

</div>

这是我的js

$("#container").on("click",".expand",{foo: "hello"}, expandHandler);

function expandHandler(event) {
alert('clicked');
$(this).closest("div.flyer").append("<b>Hey!</b>");
}

JS小提琴

我所有的内容都是动态生成的，所以我被迫使用 on()。该函数可能被调用。我试过用孩子和下一个替换最近的，但没有运气，我无法让它工作。我感谢任何帮助！

Answer 1

你想要的是选择被点击a元素的父元素旁边的 div ：

$(this).parent().next("div.flyer").append("<b>Hey!</b>");

为了在 HTML 更改时更可靠，您可能还希望选择div.flier相同的元素div.product：

$(this).closest('.product').find(".flyer").append("<b>Hey!</b>");