如何获取 $(this) 选择器的子代-之路教程

如何获取 $(this) 选择器的子代

如何在 JavaScript 中获取 $(this) 选择器的孩子

我们可以使用 find() 方法通过 jQuery 获取 $(this) 选择器的子级。

在下面的示例中，jQuery 代码选择子元素 <img>，在单击父元素 <div> 时对其应用 CSS 样式。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <style>
      .box {
        padding: 70px;
        border: 8px solid #ccc;
        text-align: center;
      }
      .box img {
        width: 300px;
        border: 5px solid #999;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/bg.png" alt="onitroad">
    </div>
    <script>
      $(document).ready(function() {
          $(".box").click(function() {
              $(this).find("img").css("border-color", "blue");
            });
        });
    </script>
  </body>
</html>

如果我们只想获取目标元素的后代，则可以使用 children() 方法。

此方法仅向下遍历 DOM 树的单个级别。

相比之下， find() 方法能够向下遍历多个级别以选择后代元素，例如孙子等。

因此， children() 方法获取一组元素，涉及适当元素集的整体唯一直接子元素。

其语法如下：

selector.children([selector])

下面的示例演示了 children() 方法的用法：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <style>
      .green {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Welcome</span>
      <p class="selected">Welcome to onitroad</p>
      <div class="selected">经历过风雨，才懂得阳光的温暖。</div>
      <p class="biggest">生活终归还得继续。</p>
    </div>
    <script>
      $(document).ready(function() {
          $("div").children(".selected").addClass("green");
        });
    </script>
  </body>
</html>

选择器上下文的描述

在 JavaScript 中，选择器默认在 DOM 内部执行搜索，从文档根开始。

可以为将可选的第二个参数应用于函数 $() 的搜索提供替代上下文。

每当对 span 选择器的搜索仅限于 this 的上下文时，只有被单击元素内的 span 才能获得添加类。

日期：2020-06-02 22:16:19 来源：oir作者：oir

←JS 如何获取浏览器视图窗口尺寸

如何在 JavaScript 中获取客户端时区偏移量→

选择器上下文的描述

目录