jquery获取一级子元素

如获取id为divId的div下的第一个子div

$("#divId")children("div")get(0)

但得到的是一个dom对象，如果要得到Jquery对象，要使用

$($("#divId")children("div")get(0))

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标签的文字

可以通过类名的不同，比如

<ul>

<li class=“li”>第一个子元素</li>

<li class=“li spe”>第二个子元素</li>

<li class=“li”>第三个子元素</li>

</ul>

可以使用$("ul")children("spe")来获得第二个子元素

也可以找到是第几个使用$("ul")find("li")eq(1)找到第二个子元素

如果是不一样的子元素，比如

<div class="mydiv">

<p>第一个子元素</p>

<div>第二个子元素</div>

<a>第三个子元素</a>

</div>

获取p标签$("mydiv")find("p")或者$("mydiv")children("p");

(1)少了个<p>

<div class="div01">

    <p><a>不选超链接</a><span></p>

    <p><span>选中这个</span></p>

</div>

（2）如下即可选中

$('div01 span')

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法：find(selector)   参数selector  字符串值，包含供匹配当前元素集合的选择器表达式。

详细说明：

如

果给定一个表示 DOM 元素集合的 jQuery 对象，find() 方法允许我们在 DOM

树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。find() 与 children() 方法类似，不同的是后者仅沿着

DOM 树向下遍历单一层级。

find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

实例：

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。

children()方法：获取该元素下的直接子集元素

find()方法：获取该元素下的所有子集元素

分别以以下HTML代码为例：<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>

children()方法获取ul下面直接子集元素li：$("ul")children("li")

需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”，最后输出结果为3

find()方法获取ul下所有元素li：$("ul")find("li")

需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("ul")find("li")length”，最后输出结果为9

children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。

以上就是关于jquery获取一级子元素全部的内容，包括:jquery获取一级子元素、jquery 判断父元素下有多少个子元素、如何使用jQuery获取一个元素下面，满足某个条件的子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！