javascript简便方法怎么判断dom中节点的父子(后代)关系,即某个节点是否是另一个节点的后代

javascript简便方法怎么判断dom中节点的父子(后代)关系,即某个节点是否是另一个节点的后代,第1张

你可以换个角度思考,判断p是不是c2的父亲

function isFatcher(p, c2){

var c = c2;

while(cparentNode){

c = cparentNode;

if(c == p)

return true;

}

return false;

}

千总,是这样的。jQuery里面的“父子关系”,“兄弟关系“是基于html DOM节点的。

比如你的例子,

<div class="div" id=div1>

<font class="fount1">我是1!</font>

<div id=div2>

<font class="fount2">我是2!</font>

</div>

</div>

div1是html页面body下的一个子节点,而这个div1又有fount1,和div2这两个子节点,fount1和div2是兄弟关系,div2下面还有一个fount2节点 。

你要用jQuery去找什么父节点,子节点,首先要搞清楚这个节点在HTML中是什么关系,然后你才可以用parent(),child()这些方法。

下面是例子

<%@ page language="java" import="javautil" pageEncoding="GB18030"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401 Transitional//EN">

<html>

<head>

<title>My JSP 'testjsp' starting page</title>

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

<script type="text/javascript">

$(document)ready(function() {

alert($("fount1")parents("div")html());

alert($("fount2")parents("div")html());

});

</script>

</head>

<body>

<div class="div">

<font class="fount1">我是1!</font>

<div>

<font class="fount2">我是2!</font>

</div>

</div>

</body>

</html>

可以使用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()方法,可以直接获取指定dom对象的父元素,但是获取table元素的时候需要注意直接用parent()方法拿到的不是table的对象哦,是tbody,tbody在取父元素才是table

<!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框架 *** 作HTML DOM是一件极其便捷的事情,如下 *** 作即可获取相应节点的数据,id和名字(下文中引用“$(this)”表示一个jQuery对象):

获取节点标签内容数据: $(this)html( )

获取表单组件中的值: $(this)val()

获取节点中的文本内容(例如textarea): $(this)text()

获取节点的id: $(this)attr("id")

获取节点的名字: $(this)attr("name")

以上就是关于javascript简便方法怎么判断dom中节点的父子(后代)关系,即某个节点是否是另一个节点的后代全部的内容,包括:javascript简便方法怎么判断dom中节点的父子(后代)关系,即某个节点是否是另一个节点的后代、jQuery怎么判断两个节的关系,如是“父子关系”,“兄弟关系”,"子父关系"。、jquery如何获取父元素的子元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存