Question

如何在点击事件

中选择具有相同类别的重复ul中的li

<div id="holder">

  <ul class="pattern">
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
  <ul class="pattern">
     <li>4</li>
     <li>5</li>
     <li>6</li>
  </ul>
  <ul class="pattern">
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
  </ul>

</div>

我想选择/获得数字为5的li（仅限ex），请假设我有一堆具有相同类别的ul。

因为我有很多ul，我正在寻找选择ul的索引然后选择li。

Answer 1

您可以使用jQuery的:contains选择器：

 $("li:contains('5')")

例如：

$("ul.pattern").click(function(){
  var index = $(this).index();
  console.log(index);
  $("ul.pattern").eq(index).find("li:contains('5')").css("background","red");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">

  <ul class="pattern">
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
  <ul class="pattern">
     <li>4</li>
     <li>5</li>
     <li>6</li>
  </ul>
  <ul class="pattern">
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
  </ul>

</div>

修改：使用ul更新代码以获取当前点击的index()的当前索引，并在所有li中查找特定的ul文字5使用eq()和find()（使用:contains选择器）

Answer 2

$('.pattern li').click(function() {
  console.log($(this).index())
  console.log($(this).text())
  console.log($('.pattern').find('li:eq(' + $(this).index() + ')').text())

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="holder">

  <ul class="pattern">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul class="pattern">
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul class="pattern">
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

</div>

试试这种方式

Answer 3

这样做：

$('<li>').val() == 5;

jquery选择器具有相同的类

3 个答案: