jQuery .has()

The jQuery .has() function is different and useful. The similar .is() function is also worth a look.

When you step around a HTML document, you can lose track of your HTML elements. Your pages will vary in structure. You sometimes need to check the current element contains something to ensure you arrived at the right place. .has() checks the contents of the current element.

The related .is() checks the current element to ensure the current element is the right element. .find() looks through the elements within the current element. Your use of .has(). .find(), and .is() will depend on what information is available to check your location.

The test data

We use the following HTML list for this test. The list has an id so jQuery can locate our test.

• Every second word is emphasised.
• Strong words in this sentence.
• Colourful sentence containing spans.

The HTML in the test data

The list contains the following HTML. The outer element, the ul, has an id so jQuery can locate the list element as the parent. jQuery can then access the list items, the li elements, as the children.

<ul id="test-list">
<li>Every <em>second</em> word <em>is</em> emphasised.</li>
<li><strong>Strong</strong> words in this <strong>sentence</strong>.</li>
<li><span style="color: #003399">Colourful</span> <span style="background-color: #009900; color: white;">sentence</span> <span style="color: #ff3300">containing</span> <span style="color: #0099cc">spans</span>.</li>
</ul>

Select the parent

The following jQuery selects the outer element, the parent, using id test-list

jQuery("#test-list")

Select the children

The following jQuery is expanded to find the children using .children(). We now have a list of children in jQuery format.

jQuery("#test-list").children()

Look for children with a span

The following jQuery steps through each child looking for <span> elements in the children.

jQuery("#test-list").children().has('span');

Process each selected child

The following jQuery steps through each of the selected children using .each(). We can add Javascript or jQuery code inside .each()

jQuery("#test-list").children().has('span').each();

Use a function

The following code shows .each() containing an empty function ready for your code.

jQuery("#test-list").children().has('span').each(function() {
});

Process the children

The following code shows this, the child object passed into the function. We can test the child object to see what we have.

jQuery("#test-list").children().has('span').each(function() {
  this
});

Display the children

The following code shows the way we add lines to the results table. We select the children of the list then display the index within the list then display the HTML content within the child then display the result of selecting the child with .has('span'). The results are added to the results table further down this page.

jQuery(function() {
  jQuery('#test-list').children().each(function(index) {
    jQuery('#test-result').append('' + index + '' + jQuery(this).html() + '' + jQuery(this).has('span').html() + '');
  });
});

The results

The following table shows the test results.

Useful

I had to restructure some pages to add a lightbox effect. Thousands of pages over several content types. Fortunately the change was related to images and I could identify the content by looking for <img> elements within a division identified by a specific class. Unfortunately the class was used in divisions not containing an image element. Using .has(), I could step through all the divisions with the right class then process only the ones containing an image. .has() works well when you are stepping through a parent or grandparent element and want to stay at that level but identify the element by something within the element.

Alternatives

If you want to find the element inside then process the element inside, you would start with .find(). If you want to identify the current element based on the element type, you use .is(). Your decision is based on stepping through the HTML elements at the level where you want to process the elements then using functions to identify your location based on attributes of the element or of elements within the current element.

You could search down to an element with the right identification then step up to the parent, or step up through several parents, to find the element you want to process. Stepping down and up can be complicated and slow. Stepping through the right level and using .has() is usually quicker, cleaner, and easier to follow.