Question

I’m doing something weird here, pleae assist if you may.
I have a webpage with a report which looks like this:

</p></li><li>ARTICLE 1 (NAME 1)<br /><p>    
<div class="list">
Nothing found. 
</div>
</p></li><li>ARTICLE 2 (NAME 2)<br /><p>    

<div class="list">
<h4 class="sub-heading">Items:</h4>  
<li class="item">
...
</li>
<li class="item">
...
</li>

</div>

This repeats throughout the page. Article X is always unique, while Name X may be the same near several Articles. The p elements are inserted by me and can be changed (while css cannot). The divs are output of a plugin beyond my reach. The plugin searches some db and returns “nothing found” or lists the found items.
There should be a table on the same page where all the possible Name X are listed and have 0 across each name by default. What I want to achieve is count Name X and increase the counter near the name only if “nothing found” exists in the element following the p with the Article. I.e, in the above example the table should read

 Name 1     1

 Name 2     0

The same Name X may be found later in the page after next ARTICLE X and with or without “nothing found” in the next element. The rule to increase the counter only if “nothing found” exists should apply.
My first idea was to hide all elements and leave only the list of ARTICLE X where “nothing found” exists in the element below. I did that, and then used the following code to count:

  var n = $("li:contains('Name 1')").length;
  $("span").text("There are " + n)

This is wrong on so many levels. First, it reads the source code which still contains all the elements as even they are hidden they still exist. It also obviously replaces text in all span elements which do exist on page (I’ve taken the span from .text description), and I don’t really know how to insert the output given I can’t control page layout.
Any ideas highly appreciated. Thanks.

Answer 1

You can get a count by first selecting elements containing NAME 1, and then checking if they have a child element which contains Nothing found, eg.

$('li:contains("NAME 1")').children('.list:contains("Nothing found")').length;

For creating and injecting elements into the DOM, have a look at the documentation here

You can also have a look at this fiddle, which is a really basic example of what I think you’re trying to achieve.