$("A+B")、next()、$("A~B")、nextAll()及相关方法

最新推荐文章于 2021-03-18 14:03:11 发布

zm2714

最新推荐文章于 2021-03-18 14:03:11 发布

阅读量2.9k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/zm2714/article/details/8123061

版权

jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

prev + next 匹配所有紧跟在prev元素后的next元素——next元素与prev元素是兄弟关系。（理解元素：不包括prev，仅包含prev的下一个兄弟元素）

等同于next()方法

看个例子

<form>
  <label>Name:</label>
  <input name="name" value="a" />
  <fieldset>
    <label>Newsletter:</label>
    <input name="newsletter" value="b" />
  </fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
  <label>Newsletter:</label>
  <input name="newsletter" value="e" />
</fieldset>

$("form + input").css('color', '#FF0000');

结果如下图所示：

上面已经说过，这里在重申一次：包含的结果集不包括prev，仅包含prev的下一个兄弟元素，或理解为这个元素与prev为兄弟元素，且紧跟在prev之后。

从上面的例子可以看出。form、input(name="a1")、div、input(name="a2")、fieldset等是兄弟元素。但结果却是name="a1"的input被包含在结果集中，这是因为input(name="a1")是紧跟在form之后的。所以$(A+B)，一是满足A与B是兄弟元素关系；二是满足B紧跟在A之后。

这里顺便在插一句：

$("form input").css('color', '#FF0000');
//它等同于：$("form").find("input").css('color', '#ff0000');

这个结果将是什么？

$("form > input").css('color', '#FF0000');
//它等同于 $("form").children("input").css('color', '#ff0000');

这个结果将是什么？

了解上面几个相似语法之间的区别。这里不在熬述了。如果你不了解，请访问：http://blog.csdn.net/zm2714/article/details/8128747

言归正传：

那么我再将上面的html代码中“<input name="a1" value='c' />”去掉，变成：

<form>
  <label>Name:</label>
  <input name="name" value="a" />
  <fieldset>
    <label>Newsletter:</label>
    <input name="newsletter" value="b" />
  </fieldset>
</form>

<div>789</div>
<input name="a2" value='d' />
<fieldset>
  <label>Newsletter:</label>
  <input name="newsletter" value="e" />
</fieldset>

$("form + input").css('color', '#FF0000');

结果会是？这个留个你自己去测试吧。

下面再看看用next()方法是如何实现相同的效果的。

首先还是先了解一下next()

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则同时也要符合。

我们先看一下，以上面最近的html代码为例：

$("form").next().css('color', '#FF0000');

这里789变成了红色。这是因为<div>789</div>是form元素之后紧邻的元素。

$("form").next("input").css('color', '#FF0000');

这是因为<div>789</div>这个<form>元素之后的紧邻元素不是input。所以不符合条件。千万不要认为，$("form").next("input").css("color","#ff0000")会使<input name="a2" value='d' />变为红色。input只是起过滤作用，而不是做为被找对象。

点击这里，来看一下next()方法的一个简单示例

在来看一个例子：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p>Hello</p>
  <div class="selected">Hello Again 1</div>
  <div class="selected">Hello Again 2</div>
  <div><span>And Again</span></div>
<script>
  $("p").next(".selected").css("background", "yellow");
</script>
</body>
</html>

结果如下图所示：

其实这个例子原型在这：http://www.w3school.com.cn/tiy/t.asp?f=jquery_traversing_next

为防止干扰，上面的html代码我稍微做了点改动。

下面来聊一聊 $("A~B") 和 nextAll()

$("A~B") A元素之后的所有兄弟元素B。（结果集中不包括A；另外B是A元素之后的兄弟元素）。等同于nextAll()方法

其实这一块和$("A+B")基本差不多，它们的相同点是：A与B是兄弟元素，结果集中不包括A。

它们的区别是$("A+B")表示的是A后紧跟的B元素，且只有一个。$("A~B")表示的是遍历A后面的所有兄弟元素B。

当然，掌握了next()方法，nextAll()也就不难掌握。下面还是对nextAll()方法做一个简要说明：

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，也可以直接根据nextAll单词来理解。next，匹配元素之后的（不包括匹配元素），all，所有（与匹配元素是同辈关系的所有元素）

选择器筛选是可选的。如果应用选择器，则将通过检测元素是否匹配来对它们进行筛选。

2、http://www.w3school.com.cn/tiy/t.asp?f=jquery_traversing_nextall_2

在看几个例子：

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

$('.inside ~ div').css('color', '#FF0000'); //G2和G4会变成红色 同nextAll()方法

$('.inside + div').css('color', '#FF0000'); //G2会变成红色（紧跟） 同next()方法

$('.inside + span').css('color', '#FF0000'); //都没有变成红色

$(".inside").next("div").css('color', '#FF0000');//G2会变成红色（紧跟）

$(".inside").nextAll("div").css('color', '#FF0000');//G2和G4会变成红色

例2：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li class="a">list item 4</li>
    <li>list item 5</li>
  </ul>
<script>
  $('li.third-item').nextAll().css('background-color', 'red');
</script>
</body>
</html>

同样是上面的html，我换成下面的js

$('li.third-item').nextAll(".a").css('background-color', 'red');

结果如下：

总结一下：

$("A+B")和next()方法，我在上文中一再强调“紧跟”这两字。通过上面的例子体会。针对next()方法，如果加上选择器，则将通过检测元素是否匹配来对它们进行筛选，那么如果这个紧跟的同胞元素，或叫兄弟元素不匹配选择器，则结果为一空集。

接下来，我想说的是，实在没有什么再总结的了。

good luck.

本来文章到此也应该结束了，但是又忍不住将与本篇相关的两个jquery遍历方法在此罗列并做一个简要说明。这两个函数是：prev()方法和prevAll()方法

prev previous [ˈpriviəs] 的缩写

prev()方法对应于next()方法；prevAll()方法对应于nextAll()方法，下面对这两个方法做一简要说明：

.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。例一例二

.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。例一例二

掌握了next()方法、nextAll()方法、prev()方法、prevAll()方法，还需考虑三个方法

1、siblings()方法。（sibling [美][ˈsɪblɪŋ] 兄弟、姐妹之意）

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

该方法唯一要注意的地方是：原始元素不包含在同胞元素中

2、nextUntil() 方法及 prevUntil()方法，详情请点击

现在不用多解释，也了解到了上面提到的五种方法的关联性。在此不在熬述。

zm2714

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
$("A+B")、next()、$("A~B")、nextAll()及相关方法

prev + next 匹配所有紧跟在prev元素后的next元素——next元素与prev元素是兄弟关系。（理解元素：不包括prev，仅包含prev的下一个兄弟元素）等同于next()方法看个例子 Name: Newsletter: 789 Newsletter: $("form + input
复制链接

扫一扫