jQuery how to removeClass of only certain elements

Question

I have a jQuery project where I'm looping through a list of elements that all have the same class. What I need is for the 1st two elements class to be removed. Therefore I'm using the .removeClass() method. However, I don't know how to use that method and only remove the 1st two. It's moving all of them. Can someone help me without changing the direction of my code.

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

`currentH2Element == togglerHeaders[0] || togglerHeaders[1]` doesn’t mean the same thing as `currentH2Element == togglerHeaders[0] || currentH2Element == togglerHeaders[1]`. https://stackoverflow.com/questions/9303160/if-statement-in-javascript-always-true — Ry-, Oct 30 '18 at 00:28

score 1 · Accepted Answer · edited Oct 30 '18 at 00:57

1

Of course $("h2").removeClass("toggler"); will remove class from all, because it is referring to all.

I slightly edited your lines:

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

edited Oct 30 '18 at 00:57

Kenny Horna

13,485
4
44
71

answered Oct 30 '18 at 00:29

dp2050

332
3
8

Thank you this answer made the most logical sense and was simple while not changing the direction of my original code. – Aishah91 Oct 30 '18 at 13:55

score 1 · Answer 2 · answered Oct 30 '18 at 00:48

1

Plain JS .querySelectorAll with :nth-child formula

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

answered Oct 30 '18 at 00:48

Ronnie Royston

16,778
6
77
91

score 0 · Answer 3 · answered Oct 30 '18 at 00:47

This is what I came up with.

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>

Sorry. I simply cannot stand jquery – Electrox Mortem Oct 30 '18 at 00:49 — Electrox Mortem, Oct 30 '18 at 00:49

Stephanie Schellin · Answer 4 · 2018-10-30T02:15:54.773

Answer

This is the line of jQuery you are looking for ...

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

Explanation

:gt(1) Will select all elements at an index greater than 1 within the matched set

See ... https://api.jquery.com/gt-selector/

Example

For full example see ...

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

or ...

$('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 how to removeClass of only certain elements

4 Answers4

Answer

Explanation

Example