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?
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>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>