jQuery - $('#test ul > li').index(2).hide(); - 可行吗？

Question

我可以轻松地使用索引值来操作吗？ 我认为使用自然索引值比使用类更好。 我想以这种方式使用 .index。

Html

<div id="test">
<ul>
<li>Im index 0</li>
<li>Im index 1</li>
<li>Im index 2</li>
<li>Im index 3</li>
</ul>
</div>

伪代码 (Jquery) Javascript

$('#test ul > li').index(2).hide();

$('#test ul > li').index(1).click(function() {
 alert('lulz you clicked the li with the index value of 1 bro');
});

我不知道如何使用.index值进行工作...这种方法是否可以轻松处理？

- Tomkay

Answer 1

您可以使用 eq：

$('#test ul > li').eq(2).hide();

它也可以成为你选择器的一部分：

$('#test ul > li:eq(2)').hide();

如果您想要获取所有在#test中的ul下的第三个li，您可以使用 nth-child（注意它是以1为基准的）：

$('#test ul > li:nth-child(3)').hide();

- Kobi

Answer 2

是的，你可以。然而，你需要使用 .eq() 而不是 .index()：

$('#test ul > li').eq(2).hide();

或作为选择器的一部分：

$('#test ul > li:eq(2)').hide();

- David Tang

Answer 3

你正在使用一个整数（数字），但是你只能将其与选择器或元素一起使用。在这里

编辑：
你可以编写自己的函数，像这样：

function indexValue(index)
{
    $(element).each(function(key, val) {
        if(key+1 == index) // + 1 because you started from 0
        {
            return val;
        }
    });
}

- Yoram de Langen

Answer 4

$(document).ready(function(){
  $("button#1").click(function(){
    $("p").hide();
  });
});
$(document).ready(function(){
  $("button#2").click(function(){
    $("p").show();
  });
});
<button id="1">Clica-me</button>
<button id="2">Volta-me</button>

- Alexssandrolima