Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to detect whether each element of a list of element-nodes does feature a specific css-class name?

Given the following test environment …

const nodeList = document.querySelectorAll('p');
const testArray = Array.from(nodeList);

testArray.every(function (elmNode) {
  if (elmNode.classList.contains('ipsum')) {

    console.log(
      'All element nodes do feature the `ipsum` css-class name.'
    );
  }
});
.lorem {
  font-family: courier new, courier;
}
<p class="lorem ipsum">Lorem ipsum</p>
<p class="lorem dolor sit">dolor sit</p>
<p class="lorem amet">amet.</p>

… the above implementation does not log the correct result.

How can one detect whether each element of a list of element-nodes does feature a specific css-class name?

And as for the above example code, how would one execute an additional function in case the condition (every element node features a specific class-name) is met?

Tags:

2

Answers


  1. 0

    The callback function used in the .every(…) prototype function should return a boolean value. If you want to perform an operation based on whether all elements contain a value or meet a certain class condition, you should act according to the result of the .every(…) function

    let jaJivuSrediHohlochertei = Array.from(test)

let isHaveClass = jaJivuSrediHohlichertei.every(function(v){
    return v.classList.contains('hohlipidrili');
})

if(isHaveClass){
    alert('all itemts has this class')
}
    Login or Signup to reply.
  2. 0

    One firstly should consult a reliable documentation/reference like MDN on the every array method.

    Secondly, one might write a test case, boiled down to the most necessary scenario/environment, not only for a well asked question on Stackoverflow, but utmost for ones own (debugging) sake.

    As already stated, the every method expects a callback function which has to return a boolean (or a truthy/falsy) value.

    The OP’s edited example code then changes to …

    function proceed() {
  console.log(
    '... proceed with next task ...'
  );
}
function doesElementFeatureIpsumClass(elmNode) {
  return elmNode.classList.contains('ipsum');
}
function doesElementFeatureLoremClass(elmNode) {
  return elmNode.classList.contains('lorem');
}
const nodeList = document.querySelectorAll('p');

if (
  Array
    .from(nodeList)
    .every(doesElementFeatureIpsumClass)
) {

  proceed();

} else {
  console.log(
    'Not every element node does feature the `ipsum` css class-name.'
  );
}

if ([...nodeList].every(doesElementFeatureLoremClass)) {

  console.log(
    'Every element node does feature the `lorem` css class-name.'
  );
  proceed();
}
    .lorem {
  font-family: courier new, courier;
}
    <p class="lorem ipsum">Lorem ipsum</p>
<p class="lorem dolor sit">dolor sit</p>
<p class="lorem amet">amet.</p>

    Following the OP’s comment …

    I repeat the question again: after checking, if all the elements have a "test" class, delete the "test" class in the last element. What does this have to do with it!? and delete the "test" class in the last element only if

    … the example code easily changes to …

    const nodeArray = [...document.querySelectorAll('p')];

if (
  nodeArray.every(node => node.classList.contains('lorem'))
) {
  nodeArray.at(-1).classList.remove('lorem');
}
    .lorem {
  font-family: courier new, courier;
  color: #c0f;
}
    <p class="lorem ipsum">Lorem ipsum</p>
<p class="lorem dolor sit">dolor sit</p>
<p class="lorem amet">amet.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search