javascript - 具有相同类的 jquery 选择器

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(仅限示例)，请假设我有一堆具有相同类的 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 选择器)