jquery - 从兄弟元素 onClick jquery 中查找索引

Question

我有多个具有相同类名的 div，可以动态填充容器。

<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>

每个 div.content 都有一个按钮，将显示 jqueryUI 对话框。模式启动后，它有两个用于保存和取消的按钮。如果单击取消，警报将显示启动模式的 div 的索引位置，并从启动模式的 div.content 容器中删除“cancel”类。

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

这是我的 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) + ")");
});

对于模态

$(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;
    });
});

感谢您的任何输入，目前我收到的警报值为 -1。如果我省略索引选择器，它会显示索引中包含的所有 div。我希望这是有道理的，再次感谢您。

Answer 1

我会重组你的代码。这是我想出的框架。我认为您可以利用它来满足您的需求。

http://jsfiddle.net/v4dtL/

一些事情:

不要使用live。它已被弃用。请改用 on 或 delegate。

向单击的元素添加一个名为 modalized 的类。这使您可以跟踪谁启动了模式窗口，而无需进行任何时髦的 DOM 遍历。

使用 jQuery 的 index 找出被单击元素相对于其兄弟元素的索引。

//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 的 data 对象允许您存储元素的信息。所以你可以做这样的事情。未经测试。

$('.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');
});