你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

jQuery遍历中的children方法的使用详解

2018-01-30JS/JQ墨初915°c
A+ A-

利用jQuery插件,我们可以对DOM树中指定的一个元素内的所有子元素进行操作,我们可以获取这个元素中所包含原色的个数,也可以给包含的某个指定的子元素添加一些样式等等,而这个操作的方法就是jQuery遍历中的一个children()方法

jQuery中children()方法的使用

jQuery中的children()方法返回返回被选元素的所有直接子元素。

例1:获取UL元素中包含LI标签的个数

HTML代码:

jQuery中children()获取元素的个数

<ul id="ul">
    <li>我是第一个li标签</li>
    <li>我是第二个li标签</li>
    <li>我是第三个li标签</li>
    <li>我是第四个li标签</li>
    <li>我是第五个li标签</li>
</ul>

jQuery代码

var ul=$('#ul').children();
alert(ul.length);

结果,会弹出数字“5”

例2:改变UL所包含的class为colorli的li标签内的字体颜色

HTML代码

利用jQuery中children()给某个元素加样式

<ul id="ul">
    <li>我是第一个li标签</li>
    <li>我是第二个li标签</li>
    <li class="li">我是第三个li标签</li>
    <li>我是第四个li标签</li>
    <li>我是第五个li标签</li>
</ul>

jQuery代码

 $('#ul').children('.li').css("color","red");

结果如下图

jQuery中children()

例3:循环输出所有LI标签的内容

html代码

利用jQuery中children()输出元素的内容

<ul id="ul">
    <li>我是第一个li标签</li>
    <li>我是第二个li标签</li>
    <li>我是第三个li标签</li>
    <li>我是第四个li标签</li>
    <li>我是第五个li标签</li>
</ul>

jQ代码

var $ul = $("#ul").children();
for(i=0;i<$ul.length;i++){
    alert($ul[i].innerText);
}

结果,会分五次弹出LI标签的内容

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
jQuery遍历中的children方法的使用详解

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录