How to check if an HTMLCollection contains an element with a given class name using javascript?

Hi i am new to programming and i want to access the array inside an object using javascript...

i have the datastructure like below,

const some_obj = {
    accessKey: "",
    children: [
        div.someclassname,
        div.someclassname,
        div.someclassname.highlight,
    ]
}

Below is what it looks like in browser console when i log the variable.

object
current: div.wrapper
    accessKey: ""
    align: ""
    childElementCount: 4
    childNodes: NodeList(4) [div.someclassname, div.someclassname.highlight, 
    div.someclassname]
    children: HTMLCollection(4) [div.someclassname, 
    div.someclassname.highlight, div.someclassname]

printing some_obj.children in the console gives below output. object.children HTMLCollection(3) 0: div.someclassname 1: div.someclassname.highlight 2: div.someclassname

Now from the some_obj i want to check if some_obj has div.classname.highlight in children array. how can i do it.

i tried using some_obj.current.children.find() but says find is not a function.

how can i check if the some_obj children has the div.someclassname.highlight. could someone help me fix this.thanks

Hi i am new to programming and i want to access the array inside an object using javascript...

i have the datastructure like below,

const some_obj = {
    accessKey: "",
    children: [
        div.someclassname,
        div.someclassname,
        div.someclassname.highlight,
    ]
}

Below is what it looks like in browser console when i log the variable.

object
current: div.wrapper
    accessKey: ""
    align: ""
    childElementCount: 4
    childNodes: NodeList(4) [div.someclassname, div.someclassname.highlight, 
    div.someclassname]
    children: HTMLCollection(4) [div.someclassname, 
    div.someclassname.highlight, div.someclassname]

printing some_obj.children in the console gives below output. object.children HTMLCollection(3) 0: div.someclassname 1: div.someclassname.highlight 2: div.someclassname

Now from the some_obj i want to check if some_obj has div.classname.highlight in children array. how can i do it.

i tried using some_obj.current.children.find() but says find is not a function.

how can i check if the some_obj children has the div.someclassname.highlight. could someone help me fix this.thanks

Share Improve this question edited Sep 10, 2019 at 17:00 asked Sep 10, 2019 at 16:28 someuser2491 1,9685 gold badges35 silver badges75 bronze badges

Possible duplicate of How to find if an array contains a specific string in JavaScript/jQuery? – wentjun Commented Sep 10, 2019 at 16:37
Hi, is div.classname.highlight a string? – sunknudsen Commented Sep 10, 2019 at 16:37
from the output in console it is a htmlcollection. i think it is not a string. – someuser2491 Commented Sep 10, 2019 at 16:42

Add a comment |

3 Answers 3

Sorted by: Reset to default 8

Since the children are not simple Array but HTMLCollection, what should be looked at is: Array.from(NodeList).

So let say we want to find if an element div.someclassname.highlight exists on the children or not (testing for class name someclassname & highlight).

let childrenNodeArr = Array.from(some_obj.children);
/*or with spread operator [...some_obj.children]*/
/*each element is a dom node we can run classList.contains*/
const elemFound = childrenNodeArr.find(
  e =>
    e.classList.contains("someclassname") && e.classList.contains("highlight")
);

if (elemFound) {
  /*yes a div.someclassname.highlight*/
}

NOTE: The above test would pass for any dom element with class names someclassname & highlight not just the div. Element.classList.contains Array.from Array.find

I don’t think there is a more elegant solution for HTMLCollection, but this works.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
      .selected {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="test">One</li>
      <li class="test">two</li>
      <li class="test selected">Three</li>
    </ul>
    <script>
      var find = function(className) {
        var elements = document.getElementsByClassName('test');
        var elementsArray = [].slice.call(elements);
        for (var index = 0; index < elementsArray.length; index++) {
          var element = elementsArray[index];
          if (element.className.indexOf(className) !== -1) {
            return true;
            // return element; // If you wish to return the element instead of true (comment out previous line if this option is used)
          }
        }
        return false;
        // return null; // If you wish to return null instead of false (comment out previous line if this option is used)
      }
      console.log(find('selected'));
    </script>
  </body>
</html>

Sounds like you're looking for some_obj.children.includes(someClass).

See includes.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to check if an HTMLCollection contains an element with a given class name using javascript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)