Question

我需要获取无序列表列表中的第一个元素。我使用波纹管代码并将所有列表项作为输出。然后我点击f12并执行此代码[此代码的图像描述输出] [1] [1]：https://i.stack.imgur.com/OZ4qn.png jQuery(window).resize(function() {

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
<script>
jQuery(document).ready(function(){
setTimeout(function(){
jQuery(window).resize(function() {
jQuery(".mean-nav>ul>li:first").click(function(){
  alert(jQuery(this).text());
   });
    });
     },2000);
});

</script>

  </head>
<body>
<div>
 <!--<div class="leader1">REgister</div>
 <div class="leader2">Login</div>
  <div class="leader3">Call Us</div>-->
   <div class="mean-nav">
    <ul>
     <li>1
     <ul>

        <li> aa</li>
        <li> bb</li>
        <li> cc</li>
        <li> dd</li>
        <li> ee</li>
    </ul>
    </li>
      <li>2</li>
      <li>3</li>
       <li>4</li>
       <li>5</li>
       </div>
     </div>
</body>
</html>

Answer 1

正如Wax已经提到的，使用

的选择器组合

$('.mean-nav > ul > li:first-child').click(function() {
    ...
});

将搜索包含类mean-nav的每个元素，搜索直接跟随ul并在内部搜索直接跟随li，但只有第一次出现的将是处理。 :first-child提供与JavaScript等效的:nth-child(1)相同的功能。

但是，:first-child选择器能够找到多个元素，因此如果您的元素中有多个ul，mean-nav包含至少一个li {每个{1}}，你会发现多个元素。

:first选择器执行不同的操作 - 它会找到选择器的第一个出现位置并在之后立即停止 - 而不会有找到多个元素的风险。

将其应用于示例：

[...]
<div class="mean-nav">
    <ul>
        <li>ASDF</li>
        <li>BDGF</li>
    </ul>
</div>
<div class="mean-nav">
    <ul>
        <li>2345</li>
        <li>9887</li>
    </ul>
</div>
[...]

在此示例中，使用两个选择器，您将获得以下结果：

$('.mean-nav > ul > li:first-child').click(function() {
    console.log($(this).html());
});

会两次登录控制台：'ASDF'和'2345' - 而

$('.mean-nav > ul > li:first').click(function() {
    console.log($(this).html());
});

只会记录一次：'ASDF'。

在您的情况下，:first-child的工作方式与:first一样，但最佳做法可能是使用:first，因为您只想查找单个元素。

原始帖子中的

修改，您没有关闭<ul>

编辑2：请记住，>选择器会直接在元素后面搜索，因此除非您离开>，否则无法找到嵌套元素走出或指定选择

编辑3：，因为操作只想在他的ul中选择 1 ，而没有附加的ul，这仍然是包含1的li的一部分，我相信他不得不破解这一点：

$(function() { console.log($('.mean-nav > ul > li:first').text().replace($('.mean-nav > ul > li:first > ul').text(), '').trim()); });

让我们分开：

console.log登录控制台

$('.mean-nav > ul > li:first').text()返回带有大量空白的1 aa bb cc ddee

x.replace(y, z)将y的{{1}}替换为z中的x

$('.mean-nav > ul > li:first > ul').text()返回带有大量空白的aa bb cc ddee

x.trim()删除字符串开头和结尾处的所有换行符，空格和制表符

所以这样做会将 li：first 中 ul 的内容从 li：first 的内容中删除，在这个例子中，让你离开 1

Answer 2

$('.mean-nav ul li:first').click(function(){
   //Do your stuff
});

您还可以使用nth-child（n）定位其他孩子。例如，

$('.mean-nav ul li:nth-child(2)').click(function(){
   //Do your stuff
});

Answer 3

试试这个：

1）$（“。mean-nav＆gt; ul＆gt; li：first-child”）

或

2）$（“。mean-nav＆gt; ul＆gt; li：nth-child（1）”）

或者，如果您想选择第一个li

3）$（“。mean-nav＆gt; ul＆gt; li：nth-of-type（1）”）

Answer 4

要访问ul的第一个li，您需要first-child选择器

jQuery(".mean-nav>ul>li:first-child").click(function(){
  alert(jQuery(this).text());
   });
    });
     },2000);
});

Answer 5

使用nth-first仅获取第一个元素。

jQuery(".mean-nav>ul>li:first").click(function(){});

请在调整大小窗口后检查。

jQuery(document).ready(function(){
    jQuery(window).resize(function() {
        jQuery(".mean-nav>ul>li:first").click(function(){
          alert(jQuery(this).text());
          return false;
        });
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  </head>
<body>
<div>
 <!--<div class="leader1">REgister</div>
 <div class="leader2">Login</div>
  <div class="leader3">Call Us</div>-->
   <div class="mean-nav">
    <ul>
     <li>1</li>
      <li>2</li>
      <li>3</li>
       <li>4</li>
       <li>5</li>
       </div>
     </div>
</body>
</html>

如何只获取JQuery中无序列表菜单中的第一个列表元素？

5 个答案: