时间戳

首页 > 解决方案 > jquery 循环遍历元素以动态添加 ids .?

jquery - jquery 循环遍历元素以动态添加 ids .?

问题描述

我正在使用 jQuery 为我想要的所有元素添加 id。它不起作用并在控制台中显示任何错误。

我希望 jQuery 循环遍历我的所有.mm元素并根据他们的订单添加 id 并将 id 也添加到他们的孩子.cards，如下所示

查询

//assigning ids codes on page load
    var lists = $("body > div.mm");
    $.each(lists,function( index, value ){
        var cards = lists[index].children();
        lists[index].setAttribute("id", "div"+index);
        $.each(cards,function(index,value){
            cards[index].setAttribute("id", "card"+index);
        });
    });

HTML

   <body>
        <div class='span'>
            <div class="list">
                <h1 contenteditable="true">DO</h1>
                <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                    <span draggable="true" ondragstart="drag(event)" class='card' contenteditable="true">card1</span>
                </div>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
                </div>
                <div class="list">
                    <h1 contenteditable="true">UNDER PROGRESS</h1>
                    <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                        <span class="Card" contenteditable="true">+ ADD CARD</span>
                    </div>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
            </div>
            <div class="list">
                    <h1 contenteditable="true">COMPLETED</h1>
                <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                </div>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
            </div>
            <div class="nlist" contenteditable="true">
                ADD NEW LIST
            </div>
        </div>
    </body>
</div>
</html>

不工作不知道为什么我要遍历所有 .mm 和 .cards 两个添加 id，如下所示。

   <body>
        <div class='span'>
            <div class="list">
                <h1 contenteditable="true">DO</h1>
                <div id='div1' class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                </div>
                    <span id='card1' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card2' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card3' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card4' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card5' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card6' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span id='card7' class="Card" contenteditable="true">+ ADD CARD</span>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
                </div>
                <div class="list">
                    <h1 contenteditable="true">UNDER PROGRESS</h1>
                    <div id='div2' class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                        <span id='card8' class="Card" contenteditable="true">+ ADD CARD</span>
                        <span id='card9' class="Card" contenteditable="true">+ ADD CARD</span>
                        <span id='card10' class="Card" contenteditable="true">+ ADD CARD</span>
                        <span id='card11' class="Card" contenteditable="true">+ ADD CARD</span>
                        <span id='card12' class="Card" contenteditable="true">+ ADD CARD</span>
                        <span id='card13' class="Card" contenteditable="true">+ ADD CARD</span>
                    </div>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
            </div>
            <div class="list">
                    <h1 contenteditable="true">COMPLETED</h1>
                <div id='div3' class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
                </div>
                    <span class="newCard" contenteditable="true">+ ADD CARD</span>
            </div>
            <div class="nlist" contenteditable="true">
                ADD NEW LIST
            </div>
        </div>
    </body>
</div>
</html>

标签： jquery

解决方案

我试图重现您想要的输出。快速一点$.each()可以让我们获得id为每个元素生成所需的索引。因为id需要是唯一的，所以您必须在不重置索引的情况下循环遍历目标元素的每个实例。

//run through the .mm's
$("div.mm").each(function(idx, elem){
  $(elem).attr("id", `div${idx+1}`);
});
//run through the .Card's
$("span.Card").each(function(idx, elem){
  $(elem).attr("id", `card${idx+1}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='span'>
  <div class="list">
    <h1 contenteditable="true">DO</h1>
    <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
      <span draggable="true" ondragstart="drag(event)" class='card' contenteditable="true">card1</span>
    </div>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="Card" contenteditable="true">+ ADD CARD</span>
    <span class="newCard" contenteditable="true">+ ADD CARD</span>
  </div>
  <div class="list">
    <h1 contenteditable="true">UNDER PROGRESS</h1>
    <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
      <span class="Card" contenteditable="true">+ ADD CARD</span>
      <span class="Card" contenteditable="true">+ ADD CARD</span>
      <span class="Card" contenteditable="true">+ ADD CARD</span>
      <span class="Card" contenteditable="true">+ ADD CARD</span>
      <span class="Card" contenteditable="true">+ ADD CARD</span>
      <span class="Card" contenteditable="true">+ ADD CARD</span>
    </div>
    <span class="newCard" contenteditable="true">+ ADD CARD</span>
  </div>
  <div class="list">
    <h1 contenteditable="true">COMPLETED</h1>
    <div class='mm' ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <span class="newCard" contenteditable="true">+ ADD CARD</span>
  </div>
  <div class="nlist" contenteditable="true">
    ADD NEW LIST
  </div>
</div>

推荐阅读