jquery 选择器具有相同的 class

Question

如何 select li 在重复的 ul 中使用相同的 class 在点击事件

<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>

我想 select/get 数字为 5 的 li（仅限示例），请假设我有一堆相同 classes 的 ul。

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

Answer 1

这样做：

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

Answer 2

您可以使用 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>

编辑： 代码已更新以使用 index() 获取当前点击的 ul 的当前索引，并在所有 [=] 中找到特定的 li 14=] 与文本 5 通过使用 eq() 和 find()（使用 :contains 选择器）

Answer 3

$('.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>

试试这个方法

jquery 选择器具有相同的 class

jquery selector with same class

html

javascript

css

jquery

selector