Javascript ignore in loop particular element that contains a string of text

Question

I have to loop through an html document that has the following:

<a class="DetailLink" href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....>Legal research.</a>
<a class="DetailLink" href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....><img...></a>

First a element contains the text that I want to capture, second is an a element that contains an image which I don't need. I have the following codes to loop through it:

var Row = document.querySelector("#exploreTable");
var Cells = Row.querySelectorAll("li a[href*='&searchType=subject'] li a:not([alt*='Find It'])");

l = Cells.length
var number = 1
for (var i = 0; i < l; i++, number++ ) {
 console.log(number + ". " + Cells[i].innerText);
}

I'm using querySelector in this case. Is there a way to add in querySelectorAll to ignore the a element that has an img element? How do I go through it? Or is there another way to do it? I'm trying to add an && condition after this:

li a[href*='&searchType=subject'

but it seems it isn't the right way. Maybe there's another way to do it? Thanks and cheers!

Answer 1

You could just do another querySelectorAll on top of all the found li a items with Cells[i].querySelectorAll("img").length < 1 to check if there are img tags inside, then only print those where there are no img tags inside like this:

var Row = document.querySelector("#exploreTable");
var Cells = Row.querySelectorAll("li a[href*='&searchType=subject']");
l = Cells.length;
var number = 1;
var arr = [];
for (var i = 0; i < l; i++, number++) {
  if(Cells[i].querySelectorAll("img").length < 1){
    arr.push(Cells[i].innerText);
  }
}

for(var i=0; i< arr.length; i++){
console.log(i +". " + arr[i]);

}

<div id="exploreTable">
  <li>
    <a class="DetailLink" href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">Legal research.</a>
  </li>
  <li>

    <a class=" DetailLink " href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">Image
      <img src=""/>
    </a>
  </li>
  
    <li>

    <a class=" DetailLink " href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">No Image again
    </a>
  </li>
</div>

OR FOR BETTER PERFORMANCE

var Row = document.querySelector("#exploreTable");
var Cells = Row.querySelectorAll("li a[href*='&searchType=subject']");
l = Cells.length;
var number = 1;
for (var i = 0; i < l; i++) {
  if(Cells[i].querySelectorAll("img").length < 1){
    console.log(number +". " + Cells[i].innerText);
    number++
  }
}

<div id="exploreTable">
  <li>
    <a class="DetailLink" href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">Legal research.</a>
  </li>
  <li>

    <a class=" DetailLink " href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">Image
      <img src=""/>
    </a>
  </li>
  
    <li>

    <a class=" DetailLink " href="/cataloging/servlet/presentbrowseheadingdetailform.do?siteTypeID=-2&amp;searchType=subject....">No Image again
    </a>
  </li>
</div>