如何選擇第一個特定的內部元素？

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