I'm trying to gather a specific set of <li> elements that I'd like to use later in a loop. However, I don't seem to have the right syntax down: the debug console tells me that my object is undefined. Can someone tell me what I'm doing wrong?
var all_help_triggers = [];
$(".canned-triggers > li").each(function() { all_help_triggers.push($(this)) });
all_help_triggers[0].click(function(){alert('hi!');})
You can simply do this:
// save selected jQuery objects into variable
var all_help_triggers = $(".canned-triggers > li");
// get first element in jQuery object, and assign a click handler
all_help_triggers.eq(0).click(function(){
alert('hi!');
});
EDIT (Based off additional comment):
To get the index, use .index()
$('.canned-content > li').hide();
$('.canned-triggers > li').click(function() {
var i = $(this).index();
$('.canned-content > li').eq(i).show();
});
http://jsfiddle.net/samliew/erp2J/11/
If you want to hide a list on page load, you should do it in CSS. Instead of:
$('.canned-content > li').hide();
remove that line and add this CSS instead:
.canned-content > li { display: none; }
When you use each() the "this" value refers to "each" element it iterates. so instead using an additional array, you should try something like that ...
$(".canned-triggers > li").each(function() {
$(this).click(function( {
alert('hi!')
});
});
Just noticed your comment:
see Fiddle example: http://jsfiddle.net/ScRqc/
<ul class="canned-triggers">
<li data-element="#li1">heyo1</li>
<li data-element="#li2">heyo2</li>
<li data-element="#li3">heyo3</li>
</ul>
<ul class="canned-content">
<li id="li1">I'm heyo content 1</li>
<li id="li1">I'm heyo content 2</li>
<li id="li2">I'm heyo content 3</li>
</ul>
$('.canned-content > li').hide();
$('.canned-triggers > li').click(function() {
var toggleElement = $(this).data("element");
$(toggleElement).show();
});
You should check whether your selector does return anything.
Also, an jQuery collection is array-like, what means you don't need to explicitly convert it to an array... you can loop thru it with an for without any problems.
However, if you still need an JavaScript array, you can do so with the following code:
var all_help_triggers = $.makeArray( $(".canned-triggers > li") );
More docs on the $.makeArray method here
