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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

方法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 4

第一个特定元素

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

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

似乎只是逻辑解决方案，易于开发人员阅读

Answer 5

不要这样做。浏览器如何知道要关注哪个链接？它是无效的HTML

我建议你改用它：

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

正如您所见，开始和结束链接到page1但中间指向第2页。

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

5 个答案: