Question

This is one of the 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>

So i’m trying that when I click on the “.panier”, it puts the the value of the alt attribute of the “.iconapp” in a new div. I’m having a hard time as I have 10 < li> like the one above, and when I click on any “.panier” of any < li>, I always get the att of the .icon that is in the first < li> (in the alert).

This is my JQuery code:

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

Hopefully you will be able to help me.

Thanks!

Answer 1

When you use $(".iconapp") it selects all elements with that class, and then the .attr() method grabs an attribute from the first one (as you’ve seen). To relate the clicked item to the .iconapp within the same li first start from this (the clicked item) and navigate up through the DOM to the .closest("li") and then within that li .find() its .iconapp:

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