Figuring out if a span tag is inside a div

JavaScript
1

In general, I have divs like this in my code:


<div class="item ui-droppable">
      <div class="content"></div>
    </div>

However, I want to figure out if it contains a span tag. An example for that would look like this:

<div class="item ui-droppable">
 <div class="content moved color-orange" style="background-color: orange;">
  <span style="color:black; background-color: rgba(255,255,255,0.8);padding: 5px;" data-id="43" class="words">T#1 ABC12345</span>
  </div>
</div>

I was testing the following as shown in the JSFiddle (where I’m testing some other things as well and it shows true for first two console logs) and it returns false for the third one where I’m concerned about.

var selectorMatchesSpanTag = $('.item ui-droppable').is( ':has(span.data-id)');
console.log(selectorMatchesSpanTag);
2

Use:
var selectorMatchesSpanTag = $('.item.ui-droppable').is(':has(span[data-id]');

2 Likes
3

Thanks. I have slight modification on the problem I’m trying to solve which might use above solution of finding span tag existence.

Let’s say my divs are like this where some divs have span tag and some don’t.

<div class="wrap">
   <div id="drop-em" style="margin-left: 30px" class="grid">
      <div class="item ui-droppable">
         <div class="content moved color-orange" style="background-color: orange;">
            <span style="color:black; background-color: rgba(255,255,255,0.8);padding: 5px;" data-id="43" class="words">T#1 ABC12345</span>
         </div>
      </div>
      <div class="item ui-droppable">
         <div class="content moved color-orange" style="background-color: orange;">
            <span style="color:black; background-color: rgba(255,255,255,0.8);padding: 5px;" data-id="44" class="words">T#1 ABC12346</span>
         </div>
      </div>
      <div class="item ui-droppable">
         <div class="content moved color-orange" style="background-color: orange;">
            <span style="color:black; background-color: rgba(255,255,255,0.8);padding: 5px;" data-id="45" class="words">T#1 ABC12347</span>
         </div>
      </div>
      <div class="item ui-droppable">
         <div class="content"></div>
      </div>
      <div class="item ui-droppable">
         <div class="content"></div>
      </div>
   </div>
</div>

And I want to test whether a particular value of data-id is present there or not. For example, if I want to find out if data-id with value 44 is present there or not.

So I may have to loop over these divs in some manner after using the above solution to figure out if span tag exists or not and then test the existence of the value?

Doesn’t matter is I am using jQuery or vanilla JS. I was thinking of starting like:

var childDivs = document.getElementById('drop-em').getElementsByTagName('div');

but the length of childDivs is 10 here as shown in this JSFiddle.

Is this a right approach to proceed?

4

I don’t have the time right now as I am off out, but what comes to mind is

and

You may be able to do what you’re asking just using selectors and queryselector, but the above might be worth considering.

5

If you’re looking for the elements which have a span in them within that element, you can use

var childDivs = document.getElementById('drop-em').querySelectorAll('div:has(> span[data-id])');

If you’re looking for a specific value, you can add the value into the selector

var childDivs = document.getElementById('drop-em').querySelectorAll('div:has(> span[data-id="45"])');

image

2 Likes
6

Thanks. What does this (greater than) > symbol in has(> means above? I mean what does it do?

Secondly, if I don’t have any span tags in any of the divs, then would it be ideal to check for span tag existence first and then run the equality check with the testValue variable?

7

It is the direct descendent selector. So it’s only returning the divs which have the span directly in it. If you take it out, it would return not only the divs with the spans in it, but it would return the divs that contain those divs.

You could but if you’re specifically looking for a single value, then running the single queryselector would be better. I showed both methods in case you’re looking for multiple values.

3 Likes
8

Thanks for the explanation. I made use of your first method to figure out if span exists or not and if it exists, I used your second method to do the equality check with the testValue.