dubbs dubbs - 7 months ago 10
Javascript Question

jQuery find elements that match criteria

Got a tricky one where I want to add a class to all the parent

<tr>
's of
<td>
's which have either a
<span>
or a
<div>
child element within them. So I have a table with markup as below:

<table>
<tr>
<td>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<span></span>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
</table>


So I want the
<td>
's that have either a
<span>
or
<div>
to have a class added to them by jQuery...

I can't seem to work out how to loop through all the
<td>
's to check their children and then add the class to those that have either a
<span>
or
<div>
child... Is this possible?

Thanks for any light you can shed on it! It's driving me mad!

Answer

You can check with .has() if tr has div or span as a descendant:

$('table tr').has('div,span').addClass('someClass');

Check the below snippet:

$('table tr').has('div,span').addClass('someClass');
.someClass {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>td 1</td>
    <td>td 2</td>
    <td>
      <div>div</div>
    </td>
    <td>td 3</td>
  </tr>
  <tr>
    <td>td 1</td>
    <td>td 2</td>
    <td>td 3</td>
    <td>td 4</td>
  </tr>
  <tr>
    <td><span>span</span>
    </td>
    <td>td 1</td>
    <td>
      <div>div</div>
    </td>
    <td>td 2</td>
  </tr>

  <tr>
    <td>td 1</td>
    <td>td 2</td>
    <td>td 3</td>
    <td>td 4</td>
  </tr>

</table>

Comments