用jquery怎么取父节点的兄弟节点的所有子节点

用jquery怎么取父节点的兄弟节点的所有子节点,第1张

jquery获取父元素方法比较多,比如parent(),parents(),closest(),find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点。

$('#cur')parent()parent();或$('#cur')parent()parent('pp');或$('#cur')parent('pp');

jquery 兄弟节点的获取

<ul>

<li>

<h3 class="title">类目一</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li>

<li>

<h3 class="title">类目二</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li></ul>

比如要点击类目一所在的 h3,对其兄弟节点的 ul 添加一个叫做 "show" 的 class,代码如下:

$("title")click(function () { $(this)parent()find('ul')addClass('show'); });

就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul,还有一种方法是使用 siblings() 函数,代码如下:

("title")click(function() { $(this)siblings('ul')addClass('show'); })

子节点怎么获得

$("#tbody1:first-child")

:first-child

匹配第一个子元素

':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

可以使用jQuery的children方法来获取某个元素下的所有子元素。如果给定表示 DOM 元素集合的 jQuery 对象,children() 方法允许我们检索 DOM 树中的这些元素,并用匹配元素构造新的 jQuery 对象。find() 和 children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。

工具原料:编辑器、浏览器

1、使用children方法可以获得选择器下的所有子元素,代码实例如下:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="/jquery/jqueryjs"></script>

<style>

  body { font-size:16px; font-weight:bolder; }

  p { margin:5px 0; }

</style>

</head>

<body>

  <div>

    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>

 

    <p>And One Last Time</p>

  </div>

<script>$("div")children("selected")css("color", "blue");</script>

</body>

</html>

2、运行的结果是找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色,结果如下:

jQuery的parent()方法可以获得当前匹配元素集合中每个元素的父元素,因此可以用以实现选择当前元素的父元素下的另一个子元素。下面给出实例演示:

1、创建Html元素

<div class="box">

<span>实例演示:获取当前点击li标签的父标签下类型为bb4的子标签</span><br>

<div class="content">

<ul>

<li class="bb1">哈哈,我是bb1</li>

<li class="bb2">click me</li>

<li class="bb3">哈哈,我是bb3</li>

<li class="bb4">哈哈,我是bb4</li>

</ul>

</div>

</div>

2、设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

li{margin:5px;list-style: none;}

3、编写jquery代码

$(function(){

$("li")click(function() {

alert($(this)parent()find("bb4")html());

});

});

4、观察效果:点击任一个li标签都将d出最后一个li标签的文字

jQuery 提供了 parent() 方法用以获取当前匹配元素集合中每个元素的父元素,例如:

$("span")parent(); // 获取所有span标签元素的父节点对象集合

$("selected")parent(); // 获取所有class位selected的元素的父节点对象集合

$(spanselected)parent(); // 获取class为selected的span标签元素的父节点对象集合

另外,注意与parents() 方法的区别——parents() 方法获取当前匹配元素集合中每个元素的祖先元素(祖先元素不仅包括父节点,还包括祖父、曾祖父等等)。

(1)$("#id",windowopenerdocument)val(赋值);

或者$("#id",windowopenerdocument)html(赋值)

(2)上述(1)中的id为父窗口元素的id,获得后可以给赋值用val方法或者html方法

(3)原生js可以这样写:

windowopenerdocumentgetElementById("id")value=赋值或者

windowopenerdocumentgetElementById('cname')innerHTML=赋值

var jCheckbox = jQuery('checkbox');//你的checkbox

var jTr=jCheckboxparent()parent();//即可

不知道你想获取什么jQuery很强大或者使用

var jTr=jCheckboxparents('tr');//所有父元素中选择tr

var jTr=jCheckboxclosest('tr');//只要最近的

取父窗口的元素方法:

$(selector, windowparentdocument);

那么你取父窗口的父窗口的元素就可以用:

$(selector, windowparentparentdocument);

类似的,取其它窗口的方法大同小异,

$(selector, windowtopdocument);

$(selector, windowopenerdocument);

$(selector, windowtopframes[0]document);

js:

父窗口:

1、<input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail"

disabled

2、<input type="button"

onclick="windowopen('showDetailshtml','','toolsbar=no,menubar=no,resizable=yes,scrollb

ars=yes')" value="查看已有明细" id="showDetail" />

子窗口:

curproject = windowopenerdocumentgetElementById("currentProjectIDForDetail")value;

jQuery:

父窗口:

<input type="text" name="aa" id="aa" />

<input type="button"

onclick="windowopen('sonhtml','','toolsbar=no,menubar=no,resizable=yes,scrollbars=yes')

" value="send" />

子窗口:

<script>

$(function () {

temp=$("#aa",windowopenerdocument)val();

$("#bb")html(temp);

})

</script>

</head>

<body>

<div id="bb"></div>

以上就是关于用jquery怎么取父节点的兄弟节点的所有子节点全部的内容,包括:用jquery怎么取父节点的兄弟节点的所有子节点、jquery如何获取父元素的子元素、jquery 判断父元素下有多少个子元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9541055.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存