jQuery遍历元素以动态添加ID。

时间：2019-01-30 19:59:01

标签： jquery

我正在使用jQuery向所有想要的元素添加ID。它无法正常工作，并且在控制台中显示任何错误。

我希望jQuery遍历我所有的.mm元素，并为其顺序添加ID，并为其子.cards添加ID，如下所示。

JQUERY 

//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和.card两个如下所示的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>

1 个答案:

答案 0 :(得分：0)

我试图重现您想要的输出。快速一点的$.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>

相关问题
最新问题