Question

我正在尝试对一些数字标签进行重新排序，但我只希望它循环遍历包含具有特定类的子项的选择器。

我的HTML：

<div class="input-prepend">
   <span class="add-on">1</span>
   <input data-line-id="4613" type="text" class="input-large address-line" value="6 Flakefield">
   <img data-toggle="tooltip" class="input-action delete-line" src="/public_html/images/delete.png" width="16" height="16" data-original-title="Delete line 1.">
</div>

和JQuery：

$('#addressStepContent').on('click', '.delete-line', function(){
   //$(this).parent().detach();
   $.each($(this).parent().siblings('> .address-line').andSelf(), function(i, v){
       $(this).children('.add-on').text(i+1)
   })
})

哪个不起作用，它只影响您点击删除图片的input-prepend div。

如何让这个循环遍历包含类.address-line

的子项的选择器

当遇到标签元素时，它还需要停止或中断循环。

Answer 1

使用find..and我认为你不需要循环

tyr this ..

 $(this).parent().find('.add-on').text(i+1)

或

$(this).siblings('.add-on').text(i+1)

或

$(this).closest('.add-on').text(i+1)

Answer 2

这样试过？

 $.each($(this).parent().find('.address-line'), function(i, v){
        $(this).children('.add-on').text(i+1)
      })

Answer 3

试试这个：

$('#addressStepContent').on('click', '.delete-line', function(){
    var i = $(this).closest('div').index();
    $(this).siblings('.add-on').text(i+1);
});

为此你需要一个局部变量。

根本不需要

.each()，.siblings()似乎有点不正确。尝试一下，看看它是否有帮助。

Chekout the demo

Answer 4

这是我提出的解决方案。如果您对如何做到更好有任何想法，请告诉：

$('#addressStepContent').on('click', '.delete-line', function(){
      targets = $(this).parent().siblings();

      $(this).parent().detach();
      n = 0
      $.each(targets, function(i, v){
        if($(this).is('label') && $(this).text() != 'Address lines')
        {
          alert($(this).text())
          return false;
        } else {
          if($(this).children('.add-on').length > 0)
          {
            n++;
          }
          $('.add-on', this).text(n);
        }
      })
    })

JQuery编号重新排序包含类的子项

4 个答案:

Chekout the demo