jQuery | parentUntil() 与示例

parentUntil() 是一种 jQuery 方法，用于查找并选择当前元素的所有祖先元素，直到遇到指定的选择器或元素为止。

语法

$(selector).parentUntil(filter);

参数说明：

• selector：必选，用于指定元素。
• filter：可选，用于指定一个选择器或元素，用于匹配祖先元素，当匹配到该元素时，选择停止。

示例

假设我们有以下 HTML：

<div class="home">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">示例标题</h3>
          </div>
          <div class="card-body">
            <p>示例段落</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

然后我们用 jQuery 选定 p 元素，通过 parentUntil() 查找到它的所有祖先元素，直到遇到具有 class="row" 的元素为止：

$("p").parentUntil(".row")

以上代码的预期输出是：

<div class="card-body">
  <p>示例段落</p>
</div>
<div class="card">
  <div class="card-header">
    <h3 class="card-title">示例标题</h3>
  </div>
  <div class="card-body">
    <p>示例段落</p>
  </div>
</div>
<div class="col-md-6">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">示例标题</h3>
    </div>
    <div class="card-body">
      <p>示例段落</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">示例标题</h3>
      </div>
      <div class="card-body">
        <p>示例段落</p>
      </div>
    </div>
  </div>
</div>

总结起来，parentUntil() 方法可以帮助我们在 DOM 树中查找元素的祖先元素，并获取这些元素的信息，这对于动态修改 DOM 等操作来说非常有用。