jqueryparent用法(jquery中parent方法)
“jquery parent”和“parents”的区别分析。
从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。
下面列出例子说明：
HTML代码如下:
table
tr
tdinput id="btn1" ?class="btn" type="button" ?value="test" //td
tdsome text/td
/tr
/table
JQ代码如下：
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parents()获取的是td,tr,table
jquery parent的用法
script type="text/javascript"
$(document).ready(function() {
$("span").toggle(function() {
$(this).parent().parent().parent().parent().parent().next().hide('slow');
}, function() {
$(this).parent().parent().parent().parent().parent().next().show('slow');
});
});
//jQuery为了兼容浏览器，自动会在table标签里加入tbody标签，因为FF相对于IE对table标签解析要麻烦些的，所有js代码里要多加一层.parent()
//所有你以后写HTML代码时，要注意兼容各个浏览器，比如写table时记得加上thead，tbody标签，这样更能遵循W3C标准
jquery parent和parents的区别分析
可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：
.代码如下:
div id='div1'
div id='div2'p/p/div
div id='div3' class='a'p/p/div
div id='div4'p/p/div
/div
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
.代码如下:
script src="jquery-1.2.6.min.js" type="text/javascript"/script
script type="text/javascript"
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
/script
/head
body
table
tr
tdinput id="btn1" class="btn" type="button" value="test" //td
tdsome text/td
/tr
/table
其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
例子中：
divpHello/ppHello/p/div
$("p").parent() 得到的是：divpHello/ppHello/p/div对象，因为p标签的父标签是div
转载，仅供参考。
jQuery中的parent()和parents()有什么区别呢？
“parent”是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
“parents”则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
使用区别：
[html]?view plain?copy
ul?id="menu"?style="width:100px;"
li
ul
li?a?href="#"Home/a?/li
/ul
/li
liEnd/li
/ul
接下来，分别看看这三个方法：
script?type="text/javascript"
//点击Home时
$("#menu?a").click(function()?{
$(this).parent("ul").css("background",?"yellow");?//0
$(this).parent("li").parent("ul").css("background",?"yellow");?//1
$(this).parents("ul").css("background",?"yellow");?//2
$(this).closest("ul").css("background",?"yellow");?//3?return?false;
});
/script
1.parent()方法从指定类型的直接父节点开始查找，在"0"中，a的直接父节点是li所以在这里找不到ul父节点。在"2"中先找到了li，接着找到ul，并将它的背景色设置为yellow。parent()返回一个节点。
2.parents()方法查找方式同parent()方法类似，不同的一点在于，当它找到第一的父节点时并没有停止查找，而是继续查找，最后返回多个父节点，如在"2"中，使得id为menu的ul整个背景色变成了yellow。
3.closest()方法查找时从包含自身的节点找起，它同parents()很类似，不同点就在于它只返回一个节点如在"3"中，实现的功能同1相同。但它使得代码量减小，同"2"相比又只返回单一的一个节点。可见，closest()方法在项目中的使用频率是比较大的。