jQuery 遍历节点之prev()方法用法

.prev([selector])

此方法取得每个匹配的元素的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

下面来看实例：

 代码如下 复制代码

 

<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').prev().css('background-color', 'red');

结果

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

例1

 

 代码如下 复制代码

<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 type="button" id="test" value="获取class为'item'的li的前一个元素">
<script>
$("#test").click(function(){
$('li.item').prev().css('background-color', 'red');
})
</script>

例2

 代码如下 复制代码

<style type="text/css">
  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid;
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }</style><span>
<div>1</div>
<div>2</div>
<div>3<span>span</span></div>
<div>4</div>
<div>5</div>
<div>6</div>
<div id="start">7</div>
<div>8</div>
</span>
<p><button>点击我获取上一个div</button></p>
<script>
var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
 $curr = $curr.prev();
 if ($curr.length == 0){
  $curr = $("#start");
 }
 $("div").css("background", "");
 $curr.css("background", "#f99");
});
</script>

例3

 代码如下 复制代码

<div><span>梦三秋</span></div>
<p class="selected">你好</p>
<p>。。。。。。。。</p>
<script>
$("p").prev(".selected").css("background", "yellow");
</script>
时间： 2024-08-19 21:11:05

jQuery 遍历节点之prev()方法用法的相关文章

jQuery 遍历节点之next()方法

next()方法 next([selector]) 此方法取得每个匹配的元素的后一个同辈元素的元素集合. 可以用一个可选的表达式进行筛选.只有紧邻的同辈元素会被匹配到,而不是后面所有的同辈元素. 如果想取得每个匹配元素的前一个同辈元素的元素集合,那么请看这篇文章jQuery教程基础篇之DOM操作-遍历节点-prev()方法 nextAll()方法和nextUntil()方法同jquery%e6%95%99%e7%a8%8b%e5%9f%ba%e7%a1%80%e7%af%87%e4%b9%8bd

jquery遍历节点之children()方法使用说明

语法 .children(selector) 参数 描述 selector 字符串值,包含匹配元素的选择器表达式. .children([selector])方法返回的是每一个匹配的元素的直接子元素的集合.注意这里的子元素和后代元素的区别. 这里selector是可选参数,是用于过滤子元素的选择器表达式. 下面先来看一下,.children()方法不带参数的在线DEMO: 下面先来看一下,.children()方法不带参数的在线DEMO:  代码如下 复制代码 <ul class="lev

jQuery遍历节点树方法分析_jquery

本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

jQuery中prev()方法用法实例_jquery

本文实例讲述了jQuery中prev()方法用法.分享给大家供大家参考.具体分析如下: 此方法取的匹配元素集合中每个元素紧邻的前一个同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $(selector).prev(expr) 参数列表: 参数 描述 expr 可选.用于筛选前一个同辈元素的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&

Jquery中find与each方法用法实例

这篇文章主要介绍了Jquery中find与each方法用法,实例分析了find与each方法的功能.定义与使用技巧,需要的朋友可以参考下 本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: 1 2 3 4$("#id") $("#"+"id") $(this) $(element) 等等,只要灵活

jQuery中fadein与fadeout方法用法示例_jquery

本文实例讲述了jQuery中fadein与fadeout方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

Jquery中find与each方法用法实例_jquery

本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

Jquery遍历Json数据的方法

  这篇文章主要介绍了Jquery遍历Json数据的方法,涉及jQuery遍历json格式数据的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了Jquery遍历Json数据的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 4

jQuery中ajax的get()方法用法实例_jquery

本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri