小JQuery交互

Question

这是10个

中的一个

<li class="application">
    <img class="iconapp" ..../>
    <p>
        <span class="spancat">....</span>
        <span class="prix>....</span>
        <span class="description">....</span>

        <span class="panier">
            <img .../>
        </span>
    </p>
</li>

所以我在尝试点击“.panier”时，它会将“.iconapp”的alt属性的值放在一个新的div中。我很困难，因为我有10＆lt;李＆GT;像上面的那个，当我点击任何＆lt;的任何“.panier”时li＆gt;，我总是得到第一个＆lt;李＆GT; （在警报中）。

这是我的JQuery代码：

$(function ()    {
    $(".panier").click(function ()
    {
        var nom = $(".iconeapp").attr("alt");
        alert(nom);
        $("#divcat").append("<div id='appspanier'>HOLLA</div>");
    })
})

希望你能帮助我。

谢谢！

Answer 1

当您使用$(".iconapp")时，它会选择该类的所有元素，然后.attr()方法从第一个属性中获取属性（如您所见）。要将点击的项目与同一.iconapp内的li首先从this（点击的项目）开始，然后向上导航到.closest("li")，然后在其中li .find()其.iconapp：

$(function ()    {
    $(".panier").click(function ()
    {
        var nom = $(this).closest("li").find(".iconapp").attr("alt");
        alert(nom);
        $("#divcat").append("<div id='appspanier'>HOLLA</div>");
    });
});