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时，可以利用其$ awk ' BEGIN { FS=OFS="," } # set field separators NR==1 { # first record, start building the header h=$2 OFS $3 next } NR==2 { # second record, continue header construct h=h $0 # space was in the end of record NR==1 next } $1!=p { # when the table name changes print "Data : " $1 # print table name print h # and header } { for(i=2;i<=NF;i++) # print fields 2-> printf "%s%s",$i,(i==NF?ORS:OFS) # field separator or newline p=$1 # remember the table name for next record }' file和Data : archive_rule no.,data attribute,column_name,definition,data_type,valid_values,notes 1,ID,id,,int,, 2,EXECUTE SEQ,execute_seq,,int,, ... Data : archive_table no.,data attribute,column_name,definition,data_type,valid_values,notes 1,ID,id,,int,, 2,ARCHIVE RULE ID,archive_rule_id,,int,, ... Data : batch_job no.,data attribute,column_name,definition,data_type,valid_values,notes 1,BATCH JOB ID,batch_job_id,,int,, 2,JOB TYPE,job_type,,varchar,, ...方法，如下所示。

children方法将搜索指定父对象内的每个元素，而each将遍历它们。

children

each

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

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

在每个迭代中，您将删除“最后一个元素的类”，而没有刷新您的元素集合。

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

public class SortMapByKeyAndValue
{
    public static void main(String[] args)
    {
        aMapSortProgramByKeyAndValue();
    }

    private static void aMapSortProgramByKeyAndValue()
    {
        Map<String, Integer> myMap = new HashMap<String, Integer>();
        // putting values in the Map
        myMap.put("Jayant", 80);
        myMap.put("Abhishek", 90);
        myMap.put("Anushka", 80);
        myMap.put("Amit", 75);
        myMap.put("Spandan", 50);
        myMap.put("Hari", 55);
        myMap.put("Keshav", 60);

        System.out.println("Map data without Sort :-");
        for (Entry<String, Integer> myEntryMapData : myMap.entrySet())
        {
            System.out.println("The Map data is Key: " + myEntryMapData.getKey() + " Value: "
                    + myEntryMapData.getValue());
        }

        List<Entry<String, Integer>> myMapDataAsList = new ArrayList<Map.Entry<String, Integer>>();
        myMapDataAsList.addAll(myMap.entrySet());

        System.out.println("Map data Stored in List, The whole List is : " + myMapDataAsList);

        Iterator<Entry<String, Integer>> myListIterator = myMapDataAsList.iterator();
        System.out.println("Map data Stored in List, Print through iterator :-");

        for (; myListIterator.hasNext();)
        {
            Entry<String, Integer> myListData = myListIterator.next();
            System.out.println("The List data is Key: " + myListData.getKey() + " Value: " + myListData.getValue());
        }

        Collections.sort(myMapDataAsList, new Comparator<Entry<String, Integer>>()
        {

            @Override
            public int compare(Entry<String, Integer> dataOne, Entry<String, Integer> dataTwo)
            {
                return dataOne.getKey().compareTo(dataTwo.getKey());
            }

        });

        System.out.println("After Sort by the Key the Map data is : ");
        myListIterator = myMapDataAsList.iterator();
        for (; myListIterator.hasNext();)
        {
            Entry<String, Integer> myListData = myListIterator.next();
            System.out.println("The List data is Key: " + myListData.getKey() + " Value: " + myListData.getValue());
        }

        Collections.sort(myMapDataAsList, new Comparator<Entry<String, Integer>>()
        {

            @Override
            public int compare(Entry<String, Integer> dataOne, Entry<String, Integer> dataTwo)
            {
                return dataOne.getValue().compareTo(dataTwo.getValue());
            }

        });

        System.out.println("After Sort by the vale the Map data is : ");
        myListIterator = myMapDataAsList.iterator();
        for (; myListIterator.hasNext();)
        {
            Entry<String, Integer> myListData = myListIterator.next();
            System.out.println("The List data is Key: " + myListData.getKey() + " Value: " + myListData.getValue());
        }
    }
}

$(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}`);
    }
});

如何循环删除JS或Jquery中的子dom元素类

7 个答案: