JJ wrote:
I am a newbie (and very much a convert) to JQuery but have spent all
afternoon bashing my head against a brick wall with this one.
I want to show hide (or in the example, change the class) of a single
element in an array of DIV's).
Whatever I do, I can only reference the first one, and the others seem
to be ignored (even though they appear to resolve to objects).
I have narrowed my code down into a near little example. I am using
version 1.1.3.1
Cheers in advance.
JJ
JJ, your HTML is invalid. An id is supposed to be unique in a document
and accessing these divs via such an id will always return the first one
only, e.g. the first one that is found in the document - that's the way
document.getElementById works in browsers and this is what is used
internally by jQuery.
That said, first of all remove that id to fix your HTML:
<div class="wump1">aaaa</div>
<div class="wump1">bbb</div>
<div class="wump1">ccc</div>
<div class="wump1">ddd</div>
And than simply use the already given class to access these divs:
$(document).ready(function() {
$('div.wump1:nth(1)").addClass("selected");
$("div.wump1:nth(0)").addClass("selected");
});
I'd optimize that a bit:
$(document).ready(function() {
$('div.wump1").filter(':nth(1), :nth(0)').addClass("selected");
});
This is the same as, just showing an alternative:
$(document).ready(function() {
$('div.wump1").lt(2).addClass("selected");
});
Cheers,
--Klaus
