Check Position in a jQuery Selector Array
Let's say I have this in my HTML:
In my javascript/jquery, I start off my setting a variable that I'll increment.
Then, using jquery, I want to select all the list (<li>) items, and do something to each of them. I can set up this shell:
My understanding is that the $('#myList ul li') returns an array, but it's not a DOM array. Rather it's an array of those DOM elements wrapped in jQuery so that I can perform more stuff on them. Is that right?
At any rate, I'm failing to see how I can check to see if the $(this) for "each" one matches a certain position in the array.
In other words, in plain English, I want something like this:
Then, later on in the script, I increment j, so that the next time I run myFunction, it does the "something" to the next item, and the "something else" the others.
I've looked into .index(), .inArray(), and traditional myArray[j] types of things… but I'm a lightweight in javascript and know even less in jQeury, so I am getting confused.
Can anyone help me check that index number in my function above?
<div id="myList">
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
</div>In my javascript/jquery, I start off my setting a variable that I'll increment.
var j = 0;Then, using jquery, I want to select all the list (<li>) items, and do something to each of them. I can set up this shell:
$('#myList ul li').each(function() {
//do something here
})My understanding is that the $('#myList ul li') returns an array, but it's not a DOM array. Rather it's an array of those DOM elements wrapped in jQuery so that I can perform more stuff on them. Is that right?
At any rate, I'm failing to see how I can check to see if the $(this) for "each" one matches a certain position in the array.
In other words, in plain English, I want something like this:
function myFunction() {
$('#myList ul li').each(function() {
if ("this" is the one in the j position) { //do something to it }
else { //do something else to the other "etches" that don't match the j position }
})
}Then, later on in the script, I increment j, so that the next time I run myFunction, it does the "something" to the next item, and the "something else" the others.
I've looked into .index(), .inArray(), and traditional myArray[j] types of things… but I'm a lightweight in javascript and know even less in jQeury, so I am getting confused.
Can anyone help me check that index number in my function above?
or something like this
$('#myList ul li').each(function(index) {
//do something here
alert(index + " : " + $(this).html());
})
$('#myList ul li').each(function(index) {
//do something here
alert(index + " : " + $(this).html());
})
ASKER
Thanks, HainKurt. But I'm not having any luck with that solution.
i dont see why? above function gives you index & html of li elements...
what part is not working? here is the full sample
what part is not working? here is the full sample
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
//add functions here
$('#myList ul li').each(function(index) {
//do something here
alert(index + " : " + $(this).html());
})
});
</script>
</head>
<body>
<div id="myList">
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, HainKurt.
Let me go through these carefully and then I'll get back to you.
Let me go through these carefully and then I'll get back to you.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks guys.
HainKurt: This did work for me after all. Maybe something else with my script was crashing it earlier. My apologies for jumping the gun.
Albert: Thanks for the explanation and the eq method, too. One thing that is throwing me a bit is the use of the "index" argument. Most of my experience is with ActionScript, and in that, which is similar, I think when you put an argument in your function, like this...
function myFunction (myArg) {
//function
}
...you have to specify something when calling it, like this:
myFunction("passThisIn");
Otherwise, this...
myFunction();
...would throw an error for differences on "expected arguments."
Does index, as a word in the language, automatically get recognized without a definition in this example?
--
What I'm going to do is up the points from 250 to 500, and then split them between the two of you. Thanks for your help!
HainKurt: This did work for me after all. Maybe something else with my script was crashing it earlier. My apologies for jumping the gun.
Albert: Thanks for the explanation and the eq method, too. One thing that is throwing me a bit is the use of the "index" argument. Most of my experience is with ActionScript, and in that, which is similar, I think when you put an argument in your function, like this...
function myFunction (myArg) {
//function
}
...you have to specify something when calling it, like this:
myFunction("passThisIn");
Otherwise, this...
myFunction();
...would throw an error for differences on "expected arguments."
Does index, as a word in the language, automatically get recognized without a definition in this example?
--
What I'm going to do is up the points from 250 to 500, and then split them between the two of you. Thanks for your help!
ASKER
I was helped here by two very knowledgeable folks. This solved my problem by showing me how to reference the index.
caf210, you don't have to specify anything when calling the method in javascript.
myFunction() or myFunction(param) will execute the same function : myFunction.
You won't get any exceptions.
However if the definition of your method is like function myFunction(param) {} you may check if the argument param is set or not.
The index provided in your anonymous function within the jQuery each method is provided through jQuery.
jQuery is looping through the array and executes the method providing the loopcounter as an argument.
In your method you can call it whatever you like. In this example the word index is used.
myFunction() or myFunction(param) will execute the same function : myFunction.
You won't get any exceptions.
However if the definition of your method is like function myFunction(param) {} you may check if the argument param is set or not.
The index provided in your anonymous function within the jQuery each method is provided through jQuery.
jQuery is looping through the array and executes the method providing the loopcounter as an argument.
In your method you can call it whatever you like. In this example the word index is used.
ASKER
Thanks, Albert. That's very interesting. I appreciate your sharing your knowledge with me.
$('#myList ul li').each(function(index) {
//do something here
alert(index);
})