jQuery Tip: Matching Paired Elements
A common task you might want to accomplish in jQuery is to match elements
that are paired together. For example, you have a page full of
authors and only want to show their biographies if they click on a link.
Your first thought might be to do something like the following:
$(document).ready(function (){
$("dt").click(function (){
$("dd").slideDown();
});
});
The problem with this approach is that when you click on the <dt /> tag it
will open all of the <dd /> tags. This is because the
selector being used specifies all of the <dd /> tags and doesn't do
anything to filter the tags to the specific matching tag.
While there are many ways to solve this problem, depending on how your DOM is
structured, this method should work any time you have a DOM structure in which
your paired elements appear in the same order of the DOM. This means my two
selectors should return an array of elements where the positions of the paired
elements match exactly. For example:
$("a.author")[0] == $("div.author_bio")[0];
$("a.author")[1] == $("div.author_bio")[1];
$("a.author")[2] == $("div.author_bio")[2];
$("a.author")[3] == $("div.author_bio")[3];
$("a.author")[4] == $("div.author_bio")[4];
If the order of the items in the array don't match, then you won't achieve the effect
your after. The trick is to use the $.each() method to loop through
the results. This allows you to find the paired element and attach the event to
each individual element.
$(document).ready(function (){
// loop through each of the "a.author" elements
$("a.author").each(function (i){
// use the loop counter argument to locate its paired match
var $match = $("div.author_bio").eq(i);
// attach a toggle effect to the "a.author" element
$(this).toggle(
function (){
// slide down the matching "div.author_bio" element
$match.slideDown();
},
function (){
// slide up the matching "div.author_bio" element
$match.slideUp();
}
);
});
});
Example
In the example below we have a definition list (<dl />) where we want to hide
all the children <dd /> tags and only show them when you click its matching
<dt /> tag.Click on any of the items below to expand its content.
- Item 1
-
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised
her not to do so, because there were thousands of bad Commas, wild Question Marks
and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven
versalia, put her initial into the belt and made herself on the way. When she reached
the first hills of the Italic Mountains, she had a last view back on the skyline
of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline
of her own road, the Line Lane.
- Item 2
-
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised
her not to do so, because there were thousands of bad Commas, wild Question Marks
and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven
versalia, put her initial into the belt and made herself on the way. When she reached
the first hills of the Italic Mountains, she had a last view back on the skyline
of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline
of her own road, the Line Lane.
- Item 3
-
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised
her not to do so, because there were thousands of bad Commas, wild Question Marks
and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven
versalia, put her initial into the belt and made herself on the way. When she reached
the first hills of the Italic Mountains, she had a last view back on the skyline
of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline
of her own road, the Line Lane.
- Item 4
-
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised
her not to do so, because there were thousands of bad Commas, wild Question Marks
and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven
versalia, put her initial into the belt and made herself on the way. When she reached
the first hills of the Italic Mountains, she had a last view back on the skyline
of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline
of her own road, the Line Lane.
- Item 5
-
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised
her not to do so, because there were thousands of bad Commas, wild Question Marks
and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven
versalia, put her initial into the belt and made herself on the way. When she reached
the first hills of the Italic Mountains, she had a last view back on the skyline
of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline
of her own road, the Line Lane.