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。那么，包含单词Item 2的<li>元素的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中第一个逗号之后的任何内容都不会执行任何操作，但我将其保留为与您的代码保持同步。

fiddle

Answer 2

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

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

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

Answer 3

你也可以使用li的索引。

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

如何按列表项目编号确定列表<li>的ID </li>

3 个答案: