如何选择第一个特定的内部元素？

Question

这是我的HTML？

<ul> 
    <li> 
     <a href="./link1"> 
      <div>something</div> 
      <span><a href="./link2">link</a></span> 
     </a> 
    </li> 
</ul> 

这是我的jQuery代码：

$('li').on('click', function(){ 
    var link = $(this).find('a').attr('href'); 
}) 

正如你看到的，在两个<a>标签。并且.find()提到他们两个。虽然我只想选择（一个级别）中的<a>，但<li>标签中。所以预期的结果是./link。

我应该使用什么替代.find()？

Answer 1

您可以使用直接后代选择器。

$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); }) 

Answer 2

尝试eq(0)。它会得到第一个a标签

或者

与first('a')

$(this).children().first('a').attr('href') 

$('li').click(function(){ 
 
console.log($(this).children('a').eq(0).attr('href')) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>click 
 
     <a href="./link1"> 
 
      <div>something</div> 
 
      <span><a href="./link2">link</a></span> 
 
     </a> 
 
    </li> 
 
</ul>

01做

Answer 3

第一特定元素

我应该使用，而不是.find什么替代（）？

$(this).find('a:first') 

似乎是唯一的合理的解决方案，并易于被开发者阅读

Answer 4

方法1：使用jQuery的children和first

$('#myList').on('click', function() { 
 
    var link = $('#myList').children('a').first(); 
 
    console.log(link.attr('href')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 
    <li id="myList"> 
 
    <a href="./link1"> 
 
     <div>something</div> 
 
     <span><a href="./link2">link</a></span> 
 
    </a> 
 
    </li> 
 
</ul>

方法2：使用直接子选择器>

$('#myList').on('click', function() { 
 
    var link = $('li > a:first'); 
 
    console.log(link.attr("href")); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<ul> 
 
    <li id="myList"> 
 
    <a href="./link1"> 
 
     <div>something</div> 
 
     <span><a href="./link2">link</a></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 5

别那么做。浏览器如何知道要跟随哪个链接？这将会是无效的HTML

我建议你用这个代替：

<a href="page1">start</a><a href="page2">middle</a><a href="page1">end</a> 

正如你可以看到开始和结束都与第1页，但中间点，第2页。