无法使用JQuery / CSS选择子元素：nth-​​child选择器

I am trying to update the id values of elements using JQuery/CSS selector dynamically by running a for loop.

我试图通过运行for循环动态地使用JQuery / CSS选择器更新元素的id值。

What i want is when i click on button it runs the for loop and updates the id of <div id='input_1' class="input row"> which is inside each button_pro class.

我想要的是当我点击按钮它运行for循环并更新每个button_pro类中的

的id。

My issue is i cannot do so, i am not able to select child as for loop executes and can not update my id values.

我的问题是我不能这样做,我无法选择子项,因为循环执行并且无法更新我的id值。

DEMO

HTML

<div class="button_pro">
    <div id='input_1' class="input row">
        <div class="input-field col s1">
            <input class="sno" type="text" name="Sr_1" value="1">
            <label for="Sr">Sr</label>
        </div>
        <div class="input-field col s2">
            <input id="item_code" type="text" name="item_code_1" value="">
            <label for="item_code">Item Code</label>
        </div>
    </div>
</div>
<div class="button_pro">
    <div id='input_1' class="input row">
        <div class="input-field col s1">
            <input class="sno" type="text" name="Sr_1" value="1">
            <label for="Sr">Sr</label>
        </div>
        <div class="input-field col s2">
            <input id="item_code" type="text" name="item_code_1" value=" ">
            <label for="item_code">Item Code</label>
        </div>
    </div>
</div>       
<br>

<button>Click</button>

JQuery/JavaScrit

$(function () {
    $('button').click(function () {
        var numof = $(".input").length;
        alert(numof);
        var i;
        for (i = 1; i <= numof; i++) 
        {
            $(".input:nth-child(" + i + ")").attr('id', 'input_' + i);
        }
    });
});

Thank You!

2 个解决方案

#1

Use eq().

:nth-child will select the nth child. As your elements are not direct child, use eq.

:nth-​​child将选择第n个孩子。由于您的元素不是直接的孩子,请使用eq。

$(".input").eq(i).attr('id', 'input_' + i);

Also, note that eq starts from zero, so you need to change the for loop.

另请注意,eq从零开始,因此您需要更改for循环。

Demo

$(function() {
  $('button').click(function() {
    var numof = $(".input").length;
    alert(numof);
    var i;
    for (i = 1; i <= numof; i++) {
      $(".input:nth-child(" + i + ")").attr('id', 'input_' + i);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="button_pro">
  <div id='input_1' class="input row">
    <div class="input-field col s1">
      <input class="sno" type="text" name="Sr_1" value="1">
      <label for="Sr">Sr</label>
    </div>
    <div class="input-field col s2">
      <input id="item_code" type="text" name="item_code_1" value="">
      <label for="item_code">Item Code</label>
    </div>
  </div>
</div>
<div class="button_pro">
  <div id='input_1' class="input row">
    <div class="input-field col s1">
      <input class="sno" type="text" name="Sr_1" value="1">
      <label for="Sr">Sr</label>
    </div>
    <div class="input-field col s2">
      <input id="item_code" type="text" name="item_code_1" value=" ">
      <label for="item_code">Item Code</label>
    </div>
  </div>
</div>
<br>

<button>Click</button>

#2

    $(window).load(function() {
        $(function() {
            $('button').click(function() {                    
                var objs = $(".input");
                var numof = $(".input").length;
                alert(numof);
                /*
                var i;
                for (i = 1; i <= numof; i++) {
                $(".input:nth-child(" + i + ")").attr('id', 'input_' + i);
                }
                */
                $(objs).each(function(i, item) {                        
                    $('#' + item.id).attr('id', 'input_' + i);
                });
            });
        });
    });     //]]>