Javascript selecting nth element but excluding some elements

Question

Consider the following markup:

<div class="body">
     <p>...<p>
     <p>...<p>
     <blockquote>
          <p>...<p>
     </blockquote>
     <p>...<p>
     <p>...<p>
</div>

I want to select the first <p> element. I can do this with:

$( ".body p:nth-child(1)

However if I wanted to select the 3rd

(excluding the blockquote) this will not work:

$( ".body p:nth-child(3)

I tried using nth-type, but if I do:

$( ".body p:nth-of-type(1)

It will select the first

in the body and also the next p in block quote.

I need to be able to exclude or ignore the blockquote. Would it work if I read the dom into a variable and removed the blockquote before calling nth-child?

Answer 1

Since you're using jQuery, which returns an array of elements, you can avoid the quirks of the CSS nth-... rules. All you really need is a selector that only selects the elements you want.

e.g. .body > p which only matches direct children of the body class

then select the third element using jQuery's .eq(2) (It's 0 indexed, so 2 is the 3rd matching element)

$(document).ready(function() {
  $(".body > p").eq(2).text("New text")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
  <p>1</p>
  <p>2</p>
  <blockquote>
    <p>3</p>
  </blockquote>
  <p>4</p>
  <p>5</p>
</div>

Answer 2

If you just want to get the nth-direct child of an element with a specific tag (doesn't work with classnames, ids etc.) you can use :nth-of-type. Example:

$(".body p:nth-of-type(3)")[0].textContent = "Here";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
  <p>...</p>
  <p>...</p>
  <blockquote>
    <p>...</p>
  </blockquote>
  <p>...</p>
  <p>...</p>
</div>

Unfortunately you can't yet get the nth element specifying a certain condition with pure css selectors, however you could just get the 3rd element of the array. Example:

$(".body p")[2].textContent = "Changed Overall 3rd";
$(".body>p")[2].textContent = "Changed Direct 3rd";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
  <p>...</p>
  <p>...</p>
  <blockquote>
    <p>...</p>
  </blockquote>
  <p>...</p>
  <p>...</p>
</div>