如何在循環中刪除JS或Jquery中的子dom元素類

Question

我有下面的DOM結構和js代碼。

//html
<div class="my-app">
    <a class="anc">Link1</a>
    <a class="anc">Link2</a>
    <a class="anc">Link3</a>
    <a class="anc">Link4</a>
</div>

//js
var parentElm = $('div').find('.my-app') //get the parent node
var childElms = parentElm.find('a'); //select all 'a'inside parents
var total = childElms.length;

for(var i=0;i<total;i++)
{
childElms.last().removeClass('anc');
}

我面臨的問題是，盡管循環運行了4次，但是上面的代碼僅從一個'a'element（即Link4）中刪除了類。 那么我在這里想念的是什么？ 我搜索了一下，沒有得到任何參考。

提前致謝！

Answer 1

您可以簡單地使用jquery在不使用循環的情況下寫一行代碼

 $(document).ready(function(){ var parentElm = $('div.my-app a:last').removeClass('anc'); }); 

 .anc{ color:blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="my-app"> <a class="anc">Link1</a> <a class="anc">Link2</a> <a class="anc">Link3</a> <a class="anc">Link4</a> </div> 

Answer 2

在項目中使用jQuery時，可以利用其children和each方法，如下所示。

children方法將搜索指定父級中的每個元素，而each元素each將遍歷它們。

 $(document).ready(function () { 'use strict'; $('button').on('click', () => { $(".my-app").children('.anc').each((i, el) => { $(el).removeClass('anc'); }); }) }); 

 .anc { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="my-app"> <a class="anc">Link1</a> <a class="anc">Link2</a> <a class="anc">Link3</a> <a class="anc">Link4</a> </div> <button>Remove class</button> 

Answer 3

您正在使用last選擇子項數組的最后一個元素。 因此，它僅刪除最后一個孩子的班級。

嘗試：

for(var i=0;i<total;i++)
{
    childElms[i].removeClass('anc');
}

Answer 4

嘗試這個

for(var i=0;i<total;i++)
{
    childElms[total-1].removeClass('anc');
}

Answer 5

您可以使用jquery選擇器直接選擇最后一個元素並刪除該類

$('div a:last').removeClass('anc');

Answer 6

對於您的代碼，我知道您想從最后一個元素a中刪除類anc 。 您可以通過這種方式做到這一點document.querySelector('.anc:last-child').classList.remove('anc'); 我添加了一些CSS，以使您容易理解該類已從相關元素中刪除。 請看下面的例子

 document.querySelector('.anc:last-child').classList.remove('anc'); 

 .anc { color: red; font-weight: bold; } 

 <div class="my-app"> <a class="anc">Link1</a> <a class="anc">Link2</a> <a class="anc">Link3</a> <a class="anc">Link4</a> </div> 

Answer 7

在每個迭代中，您都將刪除“最后一個元素的類”，而不刷新您的Element集合。

 $(document).ready(function() { // select elements having class “anc” var childElms = $('div').find('.my-app').find('a.anc'); for(var index=0;index<childElms.length;) { childElms.last().removeClass('anc'); childElms = $('div').find('.my-app').find('a.anc'); // refresh element collection console.log(`Length: ${childElms.length}`); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <div> <div class="my-app"> <a class="anc">Link1</a> <a class="anc">Link2</a> <a class="anc">Link3</a> <a class="anc">Link4</a> </div> </div>