Question

I am using a div for each product list called result-products and within it are divs for title, image, description and info. The result-products will be called for every entry in the database. I want to get every third one to change to result-products-third. To do this i am using jquery code:

$("#products-results :nth-child(3n)").removeClass("result-products");
$("#products-results :nth-child(3n)").addClass("result-products-third");

"#products-results" is the containing div used.

The problem is when the nth child is getting every 3rd "result-produts" but it is also getting the third div inside that which is "result-products-des".
How can i stop it going into the next child down

<div class="result-products">
  <div class="result-products-title">
    content
  </div>
  <div class="result-products-img">
    image
  </div>  
  <div class="result-products-des">
    description
  </div>
  <div class="result-products-info">
    info
  </div>
</div>

Answer 1

You can use child selector:

$("#products-results > :nth-child(3n)").removeClass("result-products");