Why is my jQuery getting children i don’t expect it to?

Question

I am trying to get the 2nd div of this parent div, but it is also getting the second child of the parent’s first child. The class names are a little confusing but not in my control, so i apologize for that. I added comments to show the div’s that are getting selected.

How do i prevent <div class="ease-search__meta-item tease-search__meta-item--date"></div> from getting selected?

// jQuery

// get 2nd div of each section
jQuery(".base-tease-inner.tease-search-inner div:nth-of-type(2)").css("background-color", "purple");


// HTML

<!-- parent div  -->
<div class="base-tease-inner tease-search-inner">

<div class="ais-hits--content tease-search__meta">

<div class="tease-search__meta-item tease-search__meta-item--type">
</div>
<!-- this is the div getting selected that i need to not be selected  -->
<div class="ease-search__meta-item tease-search__meta-item--date">
</div>

<div class="tease-search__meta-item tease-search__meta-item--issues">
</div>

</div>
<!-- 2nd child i need to select  -->
<div class="tease__image tease-search__image">
</div>

<div class="ais-hits--content tease-search__content">
<div class="ais-hits--excerpt tease-search__excerpt">
</div>
</div>

</div>

0
3 years 2020-07-08T16:10:42-05:00 0 Answers 33 views 0