jQuery +相邻选择器

实例

选择与每个 <div> 元素相邻的下一个 <p> 元素:

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div + p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h2>$("div + p") 会选择什么?</h2>
<div style="border:1px solid black;padding:10px;">这是一个 div 元素</div>
<p>这个 p 元素与 div 元素相邻</p>
<p>这是另一个 p 元素</p>
<div style="border:1px solid black;padding:10px;">
  <p>这是 div 内的一个 p 元素</p>
</div>
<h2>这是 div 元素相邻的标题。</h2>
<p>这是一个 p 元素（不会选择该 p 元素，因为上面的 h2 元素才是 div 元素的 "下一个" 元素）。</p>
</body>
</html>

运行一下

定义与用法

("element + next") 选择器选取指定元素 "element" 的下元素 "next"。"next" 元素必须置于指定元素 "element" 的右边。

实例：如果 <div> 元素右边有两个 <p> 元素，用这样的语法:

$("div + p") - 只选取第一个 <p> 元素，因为它是 <div> 元素的下一个元素（另一个 <p> 元素将被忽略）

实例: 如果 <div> 元素右边有一个 <h2> 元素，然后才是 <p> 元素，用这样的语法:

$("div + p") - 将不选取 <p> 元素，因为 <div> 元素的下一个元素是 <h2> 元素

注意：指定的两个元素共享相同的父元素。

语法

("element + next")

参数	描述
element	必填。任何有效的 jQuery 选择器
next	必填。规定元素，必须是 element 参数的 next 元素。

jQuery +相邻选择器

实例

定义与用法

语法

更多实例

分类导航