juery遍历节点之prevAll()方法

来源:互联网 时间:1970-01-01

前面我们讲到了prev()方法的使用方法,下面我来接着来介绍在prevAll()方法遍历节点的方法,有需要了解的同学可参考。

prevAll()方法

.prevAll([selector])

此方法取得每个匹配的元素的前面的所有同辈元素的元素集合。

可以用一个可选的表达式在前面的所有同辈元素中进行筛选。

下面来看实例:

HTML代码:

 

 代码如下 复制代码

<UL>

<LI>li 1</LI>

<LI>li 2</LI>

<LI class=item>li 3</LI>

<LI>li 4</LI>

</UL>

<UL>

<LI>li 1</LI>

<LI>li 2</LI>

<LI class=item>li 3</LI> <LI>li 4</LI>
</UL>

$('li.item').prevAll().css('background-color', 'red');

//prevAll中的字母A必须要大写哦~不然会报错的


结果是两个ul中的<li>li 1</li>和<li>li 2</li>的背景都会变成红色。

 代码如下 复制代码

<ul>
    <li>jquery 1</li>
    <li>php 2</li>
    <li class="item">css 3</li>
    <li>java 4</li>
</ul>
<ul>
    <li>jquery 1</li>
    <li>php 2</li>
    <li class="item">css 3</li>
    <li>java 4</li>
</ul>
<input id="test" type="button" value="获取class为'item'的li的前面的所有的li元素" /> <script>
$("#test").click(function(){
$('li.item').prevAll().css('background-color', 'red');
})
</script>


再来看一个.prevAll([selector])带参数的用法

 代码如下 复制代码

<div class="selected"><span>jquery</span></div>
<div><span>PHP</span></div>
<div>CSS</div>
<p>都是相当给力的技术</p>
<script>
$("p").prevAll(".selected").css("background", "yellow");
</script>




相关阅读:
Top