jquery 怎么循环获取元素相对于自己父级元素的序号

jquery 怎么循环获取元素相对于自己父级元素的序号,第1张

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>mainhtml</title>

<style type="text/css">

</style>

<script type="text/javascript" src="jquery-180minjs"></script>

<script type="text/javascript">

jQuery (function ($)

    {

    $ ('div')each (function (i, dom)

    {

    $ (this)find ('p')each (function (j, ele)

    {

    $ (this)text ((j + 1) + " " + $ (this)text ());

    });

    });

    });

</script>

</head>

<body>

<div>

<h4>标题标题标题标题</h4>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

</div>

<div>

<h4>标题标题标题标题标题</h4>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

</div>

 怎么样获取每个p标签相对于自己父级div的序号 就是想输出为

<div>

<h4>标题标题标题</h4>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

</div>

<div>

<h4>标题标题标题标题</h4>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

</div>

<div>

<h4>标题标题标题标题标题</h4>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

<p>内容内容内容内容内容内容内容</p>

</div>

</body>

</html>

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提供了parent()方法获得当前匹配元素集合中每个元素的父元素,例如

$("p")parent("selected");    // 查找每个段落的带有 "selected" 类的父元素:

实例演示如下:

1、HTML结构

<li name="li-1"><a href="#">第1个超链接</a></li>

<li name="li-2"><a href="#">第2个超链接</a></li>

<li name="li-3"><a href="#">第3个超链接</a></li>

<li name="li-4"><a href="#">第4个超链接</a></li>

2、jquery代码

$(function(){

$("a")click(function() {

var str = $(this)parent("li")attr("name");

alert(str);

});

});

3、效果演示

很多种方法:楼上hapgaoyi | 七级 的是一种方法:

$("#divimg img")first()show(); 显示上面的div中第一个img

$("#divimg img:gt(0)")hide();隐藏上面的div中不是第一个的img

============================可爱的分隔线================================

此外,还可以这样:

$('#divimg img:eq(0)')show()siblings()hide();

说明:

此例使用了jQuery最有特色的链式 *** 作方式,从而无须多次获取对象,简洁明了,推荐使用。

以上就是关于jquery 怎么循环获取元素相对于自己父级元素的序号全部的内容,包括:jquery 怎么循环获取元素相对于自己父级元素的序号、用jquery怎么取父节点的兄弟节点、jquery选择一元素的父类元素的写法等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存