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

Question

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

我想要的是当我点击按钮时，它会运行for循环并更新每个id内的<div id='input_1' class="input row"> button_pro class。

我的问题是我不能这样做，我无法选择子项，因为循环执行并且无法更新我的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);
        }
    });
});

谢谢！

Answer 1

使用eq()。

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

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

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

Demo

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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);
                });
            });
        });
    });     //]]>