Get href Attribut aus dom Elemente

Question

Dies ist der Code, den ich versuchen bin mit und die hrefs alle nur aus dem nav zu erhalten:

componentDidMount(){ 
    $("nav ul li a").each(function(k, j){ 
     console.log(j); 
    }); 
    } 

Daraus ich erfolgreich bin all die DOM-Elemente immer auf ausgedruckt die Konsole als solche:

<a href="#home" class="nav-link">Home</a> 
<a href="#about" class="nav-link">About</a> 
...etc... 

Jetzt noch viele Dinge versucht, wie versucht zu console.log(j.attr('href')) (in der Schleife, die oben dargestellt) herausziehen tatsächlich die href Zeichenfolge, ich habe, habe aber nichts arbeiten, um zu versuchen und. (TypeError: j.attr ist keine Funktion)

Was soll ich dafür verwenden? und auch wird meine Anwendung in ReactJS gebaut, so dass ich frage mich, ob es vielleicht ein geeignetere Weg, dies zu erreichen, mit etwas wie refs

Vielen Dank

Answer 1

, wenn Sie die Zeichenfolge des Schneidens, um loszuwerden, die Wenn Sie j.href verwenden, können Sie sogar getAttribute für j verwenden.

$("a").each(function(k, j) { 
 
    console.log(j.getAttribute("href")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#home" class="nav-link">Home</a> 
 
<a href="#about" class="nav-link">About</a>

Answer 2

Hier ist eine funktionierende Lösung. Ich hoffe es hilft!

$("a").each(function(){ 
 
    console.log($(this).attr("href")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<a href="#home" class="nav-link">Home</a> 
 
<a href="#about" class="nav-link">About</a>

Answer 3

eine Zeile Änderung im Code

 $("nav ul li a").each(function(k, j){ 
 
      console.log($(this).attr('href')); 
 
     });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="home">Home</a></li> 
 
     <li><a href="page1">Page 1</a></li> 
 
     <li><a href="page2">Page 2</a></li> 
 
     <li><a href="page3">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>