Nick G Nick G - 21 days ago 5
Javascript Question

jQuery selector that gets all parent elements with less than n children

I have a table that can have a variable amount of

<td>
elements in each row, but with a max of 3
<td>
elements per row. Say I wanted to select the rows with less than 3
<td>
elements and assign them to a variable, is there a way I can select these rows with just jQuery? I know I can use something where I iterate through each row, like so:



var rows = $("tr").filter(function() {
return $(this).children().length < 3
});

rows.css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>





Is there a way I can do the same with just jQuery selectors and methods (i.e.
.siblings()
or
.parents()
)?

Here's a JSFiddle of the example I gave. I've looked for a similar question but couldn't find anything like this, so I'm hoping someone will have some ideas if this is possible.

Answer

Use combination of :not() , :has() and :eq() pseudo-class selectors.

var rows = $("tr:not(:has(:eq(2)))");

rows.css("background-color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>


FYI : Depending on your need you can use :nth-child() or :nth-of-type() instead of :eq() method.