2017-01-13 4 views
1

Это код, я использую, чтобы попытаться получить все hrefs ТОЛЬКО нав:Получить HREF атрибута из йот элемента

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

От этого я успешно получаю все элементы DOM, распечатанной на консоли как таковой:

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

Теперь, чтобы попытаться на самом деле вытащить HREF строку, я пытался много вещей, таких, как пытаются console.log(j.attr('href')) (в петлю показано выше), но не имеют ничего еще работает. (TypeError: j.attr не является функцией)

Что я должен использовать для этого? а также мое приложение построено в ReactJS поэтому мне было интересно, если там был, может быть более подходящим способом для достижения этой цели, с чем-то таким, как refs

Большое спасибо

+4

'j' является элементом ...' .attr' это метод JQuery .. поэтому '$ (j) .attr' получит вам то, что нужно .... или просто' j.href', если вы хотите делать что-то эффективно –

+2

У вас есть t ried 'console.log (j.href)' Я не использую jQuery, так что просто догадка, но, возможно, '$ (j) .attr ('href');' – NewToJS

+0

Прохладный. Ваши предложения дают мне «http: // localhost: 3000/# home» из каждого из них. Я просто нарежу от # и далее, чтобы получить фактический href. спасибо ребятам – Apswak

ответ

0

, если вы хотите избавиться от нарезка строку, которая u получите использование j.href, вы даже можете использовать getAttribute на j.

$("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>

0

Вот рабочий раствор. Надеюсь, поможет!

$("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>

0

одно изменение строки в коде

 $("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>

Смежные вопросы