Ich habe so ein Markup. Wie kann ich mit jQuery den Ankertext "Link 4" finden und formatieren?

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

Hinweis: Bitte verwenden Sie nicht die Tatsache, dass der Link das zweite Element in der Liste ist - ich muss ihn mithilfe des Ankertextes "Link4" finden.

-3
Scott C Wilson 17 Apr. 2018 im 23:12

4 Antworten

Beste Antwort

Sie können einfach $(".footer-info-list a[href$='link4']") verwenden

$(function () {
  console.log($(".footer-info-list a[href$='link4']").text());
  $(".footer-info-list a[href$='link4']").css('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>

[href$='link4'] bedeutet, dass das Element mit dem href-Attribut $ mit link4 endet

Hinweis: Sie können nur $("a[href$='link4']") verwenden, wenn Sie kein anderes Element haben, dessen href mit link4 endet.

1
Mohamed-Yousef 17 Apr. 2018 im 22:47

Sie können jederzeit .eq() verwenden, um die gewünschten Ergebnisse zu erzielen. Für Ihren Code:

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

Das Obige ist Ihr Selektor.

$(function () {
  console.log($(".footer-info-list").eq(1).find("a").eq(1).text());
});
<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>

Beachten Sie, dass .eq() einen auf Null basierenden Index verwendet.

Wenn Sie nur stylen, würde ich wirklich einen CSS-basierten Ansatz für das Stylen empfehlen, wenn Sie mich fragen. Dies ist der Selektor, den Sie verwenden müssen:

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

Und das funktioniert auch in jQuery.

div:nth-child(2) > .footer-info-list > li:nth-child(2) > a {
  background: #f00;
}
<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>
2
Praveen Kumar Purushothaman 17 Apr. 2018 im 20:20

Sie können .eq verwenden, um das gewünschte zu erhalten:

$(function() {
    console.log($(".footer-info-list").eq(1).find("a").eq(1).css('color', 'red').text());
});
<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>
1
dave 17 Apr. 2018 im 20:14