どのように最初の特定の内部要素を選択できますか？

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'); 
}) 

ご覧のように、2個の<a>タグがあります。そして.find()はその両方を参照します。私はちょうど<a>を（1つのレベル）の中の<li>タグの中に選択したいと思います。期待される結果は./linkです。

.find()の代わりにどのような方法を使用しますか？

Answer 1

直接子孫セレクタを使用できます。

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

Answer 2

.ITは最初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で行い得るでしょう eq(0)をお試しください

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

直接の子セレクタを使用すると、そうしないでください。ブラウザはどのリンクをフォローするのかを知ることを意味していますか？

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

を使用すると、ページ2にPage1のが、中央のポイントにリンクされている開始および終了見ることができるように：それは私があなたの代わりにこれを使用することをお勧め無効なHTML

だろう。