Wie kann ich mit jQuery ein bestimmtes Element in der zweiten Instanz einer Klasse finden?

Question

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.

jquery

-3

Scott C Wilson 17 Apr. 2018 im 23:12

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

Sie möchten den N-ten Kinder-Selektor und die Geschwister-Selektoren. Mit dem Geschwister-Selektor (+) gelangen Sie an der ersten Div vorbei, und mit dem Selektor für das n-te Kind () gelangen Sie zum zweiten LI in der UL. (Dokumente hier: https://api.jquery.com/nth-child-selector/ < / a>)

    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>

1

nixkuroi 17 Apr. 2018 im 20:22

Neue Fragen

jquery

Wie kann ich mit jQuery ein bestimmtes Element in der zweiten Instanz einer Klasse finden?

4 Antworten

Verwandte Fragen