jQuery selectors

[pclipwd]

I'm using the following jQuery function:

$(document).ready(function(){$("#block-views-eriks-diary-block-1 .views-field-body").hide();$(".views-row-1 .readmore").toggle(function(){  $(this).addClass("expanded");  }, function () {  $(this).removeClass("expanded");});$(".readmore").click(function(){  $("#block-views-eriks-diary-block-1 .views-row-1 .views-field-body").slideToggle("slow");});});

Is there any way to change this function so that .views-row-# can vary from 1 to 9 without having to add multiple versions of this snippet with .views-row-1, .views-row-2, etc.?I'm pretty new to jQuery so I'm not familiar with all the ins and outs yet... Any help would be appreciated!

[Ingolme]

It seems you're not familiar with Javascript. You can use a loop.

var i;for(i = 1; i <= 9; i++) {    $(".views-row-" + i + " .readmore").toggle(function() {	    ... more code here    }}

[dsonesuk]

Use jquery each(), index(), parent() to look for readmore class, look at its parent, apply class views-row-# where # will be index ref of parent (+1), then add toggle, click functions at the same time.

$(document).ready(function(){$(".readmore").each(function(){$(this).parent().addClass("views-row-"+($(this).parent().index()+1));$(".views-row-"+($(this).parent().index()+1)+" .readmore").toggle(function(){  $(this).addClass("expanded");  }, function () {  $(this).removeClass("expanded");});$(".readmore").click(function(){  $("#block-views-eriks-diary-block-1 .views-row-"+($(this).parent().index()+1)+" .views-field-body").slideToggle("slow");});});});

Edited June 22, 2012 by dsonesuk

[pclipwd]

Thanks for your response!What if I'd like to select another child of the grandparent of the current item?

<div class="views-row views-row-1 views-row-odd views-row-first">   <div class="views-field views-field-field-inleiding">	  <div class="field-content">		 <a title="Lees meer..." href="#" class="readmore">Read more...</a>	  </div>   </div>   <div class="views-field views-field-body" style="display: none;">	  <div class="field-content">CONTENT</div>   </div></div>

So let's say the current item is

<a title="Lees meer..." href="#" class="readmore">Read more...</a>

and I would like to select

<div class="views-field views-field-body" style="display: none;">

I managed to select the parent item

<div class="views-row views-row-1 views-row-odd views-row-first">

using the following snippet:

$("#block-views-eriks-diary-block-1 .readmore").click(function(){  $(this).parent().parent().parent().slideToggle("slow");});

But how can I select a child item?

[dsonesuk]

that is the sibling of the second parent, so you would use next() $(this).parent().parent().next() Edit:if you want to target specific parent you should use .closest(".target_class") save you using parent().parent()... and so on, this moves up the dom tree until it find the first target selection class name, parents(".target_class") will works similar but! it stores all of the parents before finally filtering out to the target classname.

Edited June 23, 2012 by dsonesuk

[pclipwd]

Thanks, it works perfectly!

[dsonesuk]

see edit of previous post