CODEWITHSUNDEEP
jquery
Sachin
Sachin

Reputation: 1698

How to determine whether a div with some class is the last element of that class in a parent div - jQuery?

How can we find or check whether a div with some specific class is the last element of that class in a group under a parent div? I have the following HTML -

<div id="gallery_wrapper"> <!-- gallery_wrapper starts here -->
<h3>Images in this Gallery:</h3>
        <div class="gallery">
        <a id="delimg-103" class="delete_icon" title="Delete Image" href="javascript:void(0);">
            <img width="24" height="24" border="0" alt="delete" src="images/delete.png">
        </a>
        <img width="150" height="150" border="0" alt="image" src="images/gallery/thumbs/atoz-poetry-of-poetrysync-blogspot-com-letter-s-thumb-06-09-2014-06-34-05-150x150.png">
        <p id="No Caption" class="caption"><a title="Change Caption" id="changecap-103" class="change_caption" href="#">No Caption</a></p>
        </div>
        <div class="gallery">
        <a id="delimg-104" class="delete_icon" title="Delete Image" href="javascript:void(0);">
            <img width="24" height="24" border="0" alt="delete" src="images/delete.png">
        </a>
        <img width="150" height="150" border="0" alt="image" src="images/gallery/thumbs/283762-320029728078406-2085461550-n-thumb-06-09-2014-06-34-13-150x150.jpg">
        <p id="No Caption" class="caption"><a title="Change Caption" id="changecap-104" class="change_caption" href="#">No Caption</a></p>
        </div>
        <div class="gallery">
        <a id="delimg-105" class="delete_icon" title="Delete Image" href="javascript:void(0);">
            <img width="24" height="24" border="0" alt="delete" src="images/delete.png">
        </a>
        <img width="150" height="150" border="0" alt="image" src="images/gallery/thumbs/apple-logo-thumb-06-09-2014-06-34-14-150x150.png">
        <p id="No Caption" class="caption"><a title="Change Caption" id="changecap-105" class="change_caption" href="#">No Caption</a></p>
        </div>
    <div class="clr"></div><a href="add-images.php?galid=2">Upload Images</a>            
</div>

JavaScript -

$(".delete_icon").click(function(){
    var imgid = $(this).attr("id");
    imgid = imgid.split("-");
    var parent = $(this).parents(".gallery");
    var ans = confirm("Do you really want to delete this image?");
    if(ans)
    {
        $.ajax({
            beforeSend: startRequest,
            cache: false,
            type: "POST",
            url: "ajax/ajax.php",
            data: "imgid="+imgid[1]+"&action=delete",
            success: function(response){
                if(response)
                {
                    $(".preloader").css("display", "none");

                    if(parent.is(':last-child')) // Not working
                    // condition to check whether the current element is last child of class .gallery under "#gallery_wrapper"
                    {
                        alert("Yes last child");
                    }
                    else
                    {
                        alert("Yes last child");
                    }

                    parent.animate({"width" : 0, "opacity" :0}, "slow", function(){
                        $(this).remove();
                        var count = $(".gallery").find('img').length;
                        if(count == 0)
                        {
                            $("#gallery_wrapper .clr").after("No image is uploaded to this category yet. ");
                        }
                    });
                }
            },
        });
    }
});

But problem is the following code doesn't work -

                if(parent.is(':last-child')) // Not working
                // condition to check whether the current element is last child of class .gallery under "#gallery_wrapper"
                {
                    alert("Yes last child");
                }
                else
                {
                    alert("Yes last child");
                }

How can i determine when clicking on .delete_icon it's parent element with class .gallery is the last child of its group?

Upvotes: 0

Views: 43

Answers (1)

T J
T J

Reputation: 43156

The reason why :last-child is not working is because you've an extra <div> with class clr in the same level (sibling) at the bottom, so none of the .gallery divs are last child.

Use

if(parent.is($(".gallery:last"))) 
   {
      // code
   }

The above compares the parent element against the last .gallery element.

Simplified Demo

Upvotes: 1

Related Questions