首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 操作系统 >

jQuery淘选器找父亲parent,closest,parents,parentUntil

2013-08-01 
jQuery筛选器找父亲parent,closest,parents,parentUntilbodydiv idmaindiv idhot classright

jQuery筛选器找父亲parent,closest,parents,parentUntil
jQuery淘选器找父亲parent,closest,parents,parentUntil

<body><div id="main">    <div id="hot" class="rightbar">        <h2>热门推荐</h2>        <ul>            <li>                <ul>                    <li class="p">融氏橄榄油</li>                    <li>帮宝适纸尿裤</li>                    <li id="h">有机大米</li>                    <li>妙洁垃圾袋</li>                    <li>优乐美奶茶</li>                    <li>亲亲果冻</li>                </ul>            </li>            <li>                <ul>                    <li>海飞丝洗头膏</li>                    <li>六神花露水</li>                    <li>舒肤佳香皂</li>                    <li>心相印纸巾</li>                    <li>哇哈哈矿泉水</li>                    <li>王老吉</li>                </ul>            </li>        </ul>    </div></div></body>
jQuery淘选器找父亲parent,closest,parents,parentUntil
<script type="text/javascript" language="javascript">//此处为jQuery代码</script>

测试1:找到id="h"的元素的父元素并设置背景色为灰

$("#h").parent().css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil

上面的代码等价于

$("#h").parent("ul").css("background-color","#ccc");

如果要找爷爷辈的

$("#h").parent("li").css("background-color","#ccc");

则会失败

测试2:找到id="h"的祖辈元素中符合是ul标签的元素,设置背景色为灰

$("#h").parents("ul").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil
parents不但找到了父亲,还找到了曾祖父 ^_^,但是closest就不会,因为closest找到父亲就停止找了

测试3:用closest找到id="h"的祖辈元素中符合是ul的标签的元素,设置背景色为灰

$("#h").closest("ul").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil

测试4:测试closest是从当前元素开始查找,而parents是从父辈元素开始查找,找到id="h"的父辈元素中是li标签的元素,并设置背景色为灰

$("#h").parents("li").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil

$("#h").closest("li").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil

测试5:找到id="h"的父元素中是ul标签的元素,并设置背景色为灰,目的是测试parentsUntil查找到的expr就停止了,但不包含符合expr的那个元素,对比测试1

$("#h").parentsUntil("ul").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil
没出来,其实已经找到了,只不过把找到的ul给排除了,不信找找爷爷辈的li试试

$("#h").parentsUntil("li").css("background-color","#ccc");

效果:

jQuery淘选器找父亲parent,closest,parents,parentUntil
出来了吧,其实这次变灰的是ul,因为把li排除了


测试6:测试parents和parentsUntil的区别,parentsUntil找到就停止了,parents会一直往上找,找到id="h"的父辈元素中是li标签的元素,并设置背景色为灰
这个看测试2和测试5的第一个就能看出来。

?</br>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1944176156128447";
/* cnblogs 首页横幅 */
google_ad_slot = "5419468456";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

?

来源:http://blog.csdn.net/dyllove98/article/details/8606225

热点排行