Question

I have multiple divs with the same class name that dynamically populate a container.

<div class="container">
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
</div>

Each div.content has a button that will show a jqueryUI dialog. Once the modal is launched, it has two buttons for save and cancel. If cancel is clicked, an alert will show the index position of the div that launched the modal and remove the class “cancel” from the div.content container it was launched from.

<div class="modal">
<button class="save">save</button>
<button class="RemoveCancel">cancel</button>
</div>

Here is my Jquery

$(".modal").on("click", ".RemoveCancel", function () {

    var parent = $(this).closest(".content");
    var modalTest = $(".content").index(parent);
    $("div.content:nth-child(" + (modalTest + 1) + ")").removeClass("cancel");
    alert("div.content:nth-child(" + (modalTest + 1) + ")");
});

and for the modal

$(function () {
    $(".modal").dialog({
        autoOpen: false,
        height: 140,
        modal: true
    });

 $(".showModal").live('click', function () {
        $(".modal").dialog("open");
        return false;
    });

    $(".save, .RemoveCancel").live('click', function () {
        $(".modal").dialog("close");
        return false;
    });
});

Thanks for any input, currently i’m getting a -1 value for the alert. If I leave out the selector for index it’ll show however many divs are apart of the index. I hope this makes sense, thank you again.

Answer 1

I would restructure your code. This is the framework that I came up with. I think that you can leverage it for your needs.

http://jsfiddle.net/v4dtL/

A few things:

Don’t use live. It has been deprecated. Use on or delegate instead.

Add a class called modalized to the clicked element. This allows you to keep track of who launched the modal window without doing any funky DOM traversals.

Use jQuery’s index to find out the index of the clicked element in relation to its siblings.

//when showmodal is clicked, add modalized class to the clicked element
$(".container").on('click', '.showModal', function() {
    $(".modal").show();
    $(this).addClass('modalized');
});

//I broke save and removecancel into separate event handlers so that they don't step on each others toes (order of operations)
$(".modal").on('click', '.save', function() {
    $(".modal").hide();
    $('.modalized').removeClass('modalized');
});

//Use Index() to find the modalized element in relation to its siblings
$(".modal").on("click", ".RemoveCancel", function() {        
    var index = $('.showModal').index($('.modalized'));
    alert(index);
    $(".modal").hide();    
    $('.modalized').removeClass('modalized');
});

​

jQuery’s data object allows you to store information on an element. So you could do something like this. Untested.

$('.showModal').click( function() {
      //store clicked index
      var index = $(this).siblings().index($(this));
      $('.modal').show().data('clickedIndex', index);
});

$('.cancel').click( function() {
      //retrieve clicked index
      var index = $(this).closest('.modal').data('clickedIndex');
      alert(index);
      //get all showmodal buttons, but grab the one with matching index
      $('.showModal')[index].removeClass('foo');
});