如何在循环中删除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>