不能使用JQuery/CSS:n -child选择器选择子元素

Can not select child element using JQuery/CSS :nth-child selector

本文关键字：选择器 -child 选择 元素 JQuery CSS 不能      更新时间：2023-09-26

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

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

我的问题是我不能这样做，我不能选择子作为循环执行，不能更新我的id值。

演示

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

谢谢!

使用eq()

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

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

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

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

    $(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);
                });
            });
        });
    });     //]]>
相关文章：