Question

我有一个jQuery项目，在其中循环遍历所有具有相同类的元素的列表。我需要的是删除第一个两个元素类。因此，我正在使用.removeClass（）方法。但是，我不知道如何使用该方法，而只删除第一个方法。它正在移动所有人。有人可以在不更改代码方向的情况下为我提供帮助。

function putSiblingsInTableForEachH2() {
        // line above sets function that will ultimately store siblings of each h2.toggler into a HTML table
        var togglerHeaders = $("h2.toggler");
        //  line above sets variable togglerHeaders to all h2 elements with a class of ".toggler"
        for (i = 0; i < togglerHeaders.length; i++) {
            // line above: for loop that loops through array "togglerHeaders"
            var currentH2Element = togglerHeaders[i];
            // line above sets variable currentH2Element to togglerHeaders at position i
            if (currentH2Element == togglerHeaders[0] || togglerHeaders[1]) {
                $("h2").removeClass("toggler");
            }
            var siblingsofH2 = $(currentH2Element).nextUntil("h2.toggler");
            // line above access siblings that are in h2.toggler element
            // line says: set variable "siblingsofH2" to the current h2.toggler element you're on actual sibling elements but only siblings that are in between current element and next element that is "h2.toggler"
            $(siblingsofH2).wrapAll("<table></table>");
            // line above says: after correct sibling elements are stored to variable siblingsofH2 wrap elements in HTML table
        } // line ends for loop 
    } // line ends function
    putSiblingsInTableForEachH2();
    // line above actually runs function

Answer 1

当然$("h2").removeClass("toggler");会从所有类中删除类，因为它是指全部。

我对您的台词进行了稍微编辑：

if (i < 2) {
    $(currentH2Element).removeClass("toggler");
}

Answer 2

使用.querySelectorAll公式的普通JS :nth-child

var firstTwo = document.querySelectorAll(".my-class:nth-child(-n+2)");

Answer 3

这是我想出的。

var putThingsInTable = query => {
    
    var matches = document.querySelectorAll(query);
    if(!matches) return;
      var table = document.createElement('table')
      table.appendChild(document.createElement('tr'))
     var i = 0;
     var toAdd = [];
     matches.forEach(match => {
        if(i > 1){
            toAdd.push(match);
        }
        i++
     });
     toAdd.forEach(element => {
        var td = document.createElement('td');
        td.appendChild(element);
        table.children[0].appendChild(td)
     });
     return table;
}
document.body.appendChild(putThingsInTable('h2.toggler'))

table, th, td {
    border: 1px solid black;
}

<h2 class="toggler">a</h2>
<h2 class="toggler">a</h2>
<h2 class="toggler">a</h2>
<h2 class="toggler">c</h2>
<h2 class="toggler">c</h2>
<h2 class="toggler">w</h2>
<h2 class="toggler">w</h2>
<h2 class="toggler">w</h2>
<h2 class="toggler">w</h2>

Answer 4

答案

这是您要查找的jQuery行...

$("h2.toggler:gt(1)")

说明

:gt(1)将在匹配集中选择索引大于1的所有元素

请参阅... https://api.jquery.com/gt-selector/

示例

有关完整示例，请参见...

https://codepen.io/stephanieschellin/pen/MPdWVw

或...

$('h2.toggler:gt(1)').each(function(e) {
  $(this).nextUntil('h2').wrapAll('<table></table>')
})

table {
  color: blue;
  border: solid 3px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="toggler">one</h2>
<span>one</span>
<span>one</span>


<h2 class="toggler">two</h2>
<span>two</span>
<span>two</span>


<h2 class="toggler">three</h2>
<span>three</span>
<span>three</span>
<span>three</span>


<h2 class="toggler">four</h2><span>four</span>
<span>four</span>
<span>four</span>

<h2 class="toggler">five</h2>
<span>five</span>
<span>five</span>
<span>five</span>
<span>five</span>

<h2 class="toggler">six</h2>
<span>six</span>
<span>six</span>

jQuery如何仅删除某些元素的Class

4 个答案:

答案

说明

示例