How do I find an DOM element and then loop over the hyperlinks within its contents-CodePudding

I am trying to find all hyperlink text contents within a given DOM element and extract their text contents to count all the no of characters used. I tested it in CodePen and it works but on my web page it does not even execute. The pen is https://codepen.io/shanebekker-ot/pen/XWZKKRY

I am using JQuery 3.6.x

let charCount=0;
$("body").find(".slick-list").contents().find("a").each(function(_index,element){
        charCount  = element.textContent.length;
    });
alert(charCount);

HTML

<div >
  <ul  data-action="pixelSizeIt">
    <div >
      <div  style="opacity: 1; width: 55000px; transform: translate3d(-26746px, 0px, 0px);">
        <div  data-slick-index="0" aria-hidden="false">
          <div>
            <li  style="width: 100%; display: inline-block;"><a href="#" tabindex="0">Testing 1</a></li>
          </div>
        </div>
        <div  data-slick-index="6" aria-hidden="true" tabindex="-1">
          <div>
            <li  style="width: 100%; display: inline-block;"><a href="#" tabindex="-1">Testing 2</a></li>
          </div>
        </div>
        <div  data-slick-index="7" aria-hidden="true" tabindex="-1">
          <div>
            <li  style="width: 100%; display: inline-block;"><a href="#" tabindex="-1">Testing 3</a></li>
          </div>
        </div>
        <div  data-slick-index="8" aria-hidden="true" tabindex="-1">
          <div>
            <li  style="width: 100%; display: inline-block;"><a href="#" tabindex="-1">Testing 4</a></li>
          </div>
        </div>
        <div  data-slick-index="8" aria-hidden="true" tabindex="-1">
          <div>
            <li  style="width: 100%; display: inline-block;"><a href="#" tabindex="-1">Testing 5</a></li>
          </div>
        </div>
      </div>
    </div>
  </ul>
</div>

CodePudding user response：

I suggest using native javascript instead of jquery, if the page you are running this snippet on doesn't use jquery it won't work. I would use the method "querySelectorAll" of the dom element. This method receives a CSS selector, and returns a NodeList. You can then check the NodeList "length" property.

Be aware that the returned value is not a javascript array, if you want to run a forEach you will have to turn it into an array with Array.from()

For your example the resulting code would be:

const elements = document.querySelector('.slick-list').querySelectorAll('a')
const array = Array.from(elements)
const text = array.map(element=>element.innerText).join('')
const result = text.length
console.log(result)

here is a code-pen: https://codepen.io/mpcabete/pen/oNELLJN

CodePudding user response：

I found my issue was that my code was being executed before another code block that actually dynamically created the element my code required. I move the code block to after that code and now all is good.