Question

我有这样的标记。如何使用jQuery查找和设置锚文本＆＃34; Link 4＆＃34;？

<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link1">Link 1</a>
    </li>
    <li>
      <a href="http://foo.com/link2">Link 2</a>
    </li>
  </ul>
</div>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link3">Link 3</a>
    </li>
    <li>
      <a href="http://foo.com/link4">Link 4</a>
    </li>
  </ul>
</div>

注意：请不要使用链接是列表中第二项的事实 - 我需要使用锚文本＆＃34; Link4＆＃34;来找到它。

Answer 1

您始终可以使用.eq()来获得所需的结果。对于您的代码：

$(".footer-info-list").eq(1).find("a").eq(1)

以上是你的选择。

＆＃13;

$(function () {
  console.log($(".footer-info-list").eq(1).find("a").eq(1).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link1">Link 1</a>
    </li>
    <li>
      <a href="http://foo.com/link2">Link 2</a>
    </li>
  </ul>
</div>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link3">Link 3</a>
    </li>
    <li>
      <a href="http://foo.com/link4">Link 4</a>
    </li>
  </ul>
</div>

＆＃13;

请注意.eq()使用从零开始的索引。

如果你只是造型，我真的会推荐一种基于CSS的造型方法，如果你问我的话。这是您需要使用的选择器：

div:nth-child(2) > .footer-info-list > li:nth-child(2) > a

这也适用于jQuery。

＆＃13;

div:nth-child(2) > .footer-info-list > li:nth-child(2) > a {
  background: #f00;
}

＆＃13;

<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link1">Link 1</a>
    </li>
    <li>
      <a href="http://foo.com/link2">Link 2</a>
    </li>
  </ul>
</div>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link3">Link 3</a>
    </li>
    <li>
      <a href="http://foo.com/link4">Link 4</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您可以使用.eq获取所需的内容：

＆＃13;

$(function() {
    console.log($(".footer-info-list").eq(1).find("a").eq(1).css('color', 'red').text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="footer-info-list">
     <li>
     <a href="http://foo.com/link1">Link 1</a>
     </li>
     <li>
        <a href="http://foo.com/link2">Link 2</a>
     </li>
</ul>
</div>
<div>
<ul class="footer-info-list">
     <li>
     <a href="http://foo.com/link3">Link 3</a>
     </li>
     <li>
        <a href="http://foo.com/link4">Link 4</a>
     </li>
</ul>
</div>

＆＃13;

Answer 3

您需要第N个子选择器和兄弟选择器。兄弟选择器（+）将通过第一个div，而nth-child（）选择器将使您进入UL中的第二个LI。（文档：https://api.jquery.com/nth-child-selector/）

    var child = $("div + div ul.footer-info-list li:nth-child(2)");
    child.css("background-color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="footer-info-list">
     <li>
     <a href="http://foo.com/link1">Link 1</a>
     </li>
     <li>
        <a href="http://foo.com/link2">Link 2</a>
     </li>
</ul>
</div>
<div>
<ul class="footer-info-list">
     <li>
     <a href="http://foo.com/link3">Link 3</a>
     </li>
     <li>
        <a href="http://foo.com/link4">Link 4</a>
     </li>
</ul>
</div>

Answer 4

您只需使用$(".footer-info-list a[href$='link4']")

即可

＆＃13;

$(function () {
  console.log($(".footer-info-list a[href$='link4']").text());
  $(".footer-info-list a[href$='link4']").css('color' , 'red');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link1">Link 1</a>
    </li>
    <li>
      <a href="http://foo.com/link2">Link 2</a>
    </li>
  </ul>
</div>
<div>
  <ul class="footer-info-list">
    <li>
      <a href="http://foo.com/link3">Link 3</a>
    </li>
    <li>
      <a href="http://foo.com/link4">Link 4</a>
    </li>
  </ul>
</div>

＆＃13;

[href$='link4']表示href属性为$的元素以link4结尾

注意：如果您的$("a[href$='link4']")没有以href
结尾的其他元素，您可以使用link4

如何使用jQuery在类的第二个实例中查找特定项？

4 个答案: