jquery - 如何确定列表的ID按列表项编号

Question

所以我有一个清单

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

Ans 如你所见，这个 ul 的 id 是#sortable1。现在，<li>包含单词 Item 2 的元素的 id 是什么？

<script>
$( "__LIST ITEM ID___" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>

我相信这是一个简单的，但我似乎无法找到一个简单的教程。

最好的，威尔

Answer 1

这不使用 ID，但它是一个简单的解决方案：

$( "li:contains(Item 2)" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});

使用:contains()选择器在 li 中查找文本。

应该注意的是，第一个逗号后的任何内容addClass都不会做任何事情，但我将其保留以与您的代码保持同步。

小提琴

Answer 2

您也可以使用 li 的索引。

$('li.ui-state-default:eq(2)').click(function(){
       $(this).addClass( "big-blue", 1000, "easeOutBounce" );
});

Answer 3

您的术语不正确。您正在寻找选择器—— id 只是一种选择器。

您可以使用nth-child 选择器选择第二个li元素: 。所以你的代码是：#sortable1 li:nth-child(2)

$( "#sortable1 li:nth-child(2)" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});