Jump to content

jQuery selectors


pclipwd
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...