jquery - 如何 jquery 获取元素并存储在数组中以备后用？

Question

我正在尝试收集一组<li>我想稍后在循环中使用的特定元素。但是，我似乎没有正确的语法：调试控制台告诉我我的对象未定义。有人可以告诉我我做错了什么吗？

var all_help_triggers = [];
$(".canned-triggers > li").each(function() { all_help_triggers.push($(this)) });
all_help_triggers[0].click(function(){alert('hi!');})

Answer 1

你可以简单地这样做：

// 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!');
});

编辑（基于附加评论）：

要获取索引，请使用.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/

如果您想在页面加载时隐藏列表，您应该在 CSS 中进行。代替：

$('.canned-content > li').hide();

删除该行并添加此 CSS：

.canned-content > li { display: none; }

Answer 2

当您使用 each() 时，“this”值指的是它迭代的“每个”元素。所以代替使用额外的数组，你应该尝试类似的东西......

$(".canned-triggers > li").each(function() { 
    $(this).click(function( {
       alert('hi!')
    });
});

刚刚注意到你的评论：

参见小提琴示例：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();
});

Answer 3

您应该检查您的选择器是否返回任何内容。

此外，jQuery 集合类似于数组，这意味着您不需要将其显式转换为数组……您可以for毫无问题地循环遍历它。

但是，如果您仍然需要一个 JavaScript 数组，您可以使用以下代码来实现：

var all_help_triggers = $.makeArray( $(".canned-triggers > li") );

$.makeArray有关该方法的更多文档here