jQuery技术

jquery设置子元素class的方法详解

字号+ 作者:H5之家 来源:H5之家 2017-05-14 12:02 我要评论( )

在 class=www111cnnet 下有 3个 ul,现在希望给每个ul下的第5个li元素添加 class=com //获取id=div1下的子元素的个数 $('#div1').children().length; //获取id=div1下的span元素个数 $('#div1').children('span').length; 具体jQuery代码: $(.www111cnnet u

   在 class="www111cnnet" 下有 3个 ul,现在希望给每个ul下的第5个li元素添加 class="com"

  //获取id=div1下的子元素的个数

  $('#div1').children().length;

  //获取id=div1下的span元素个数

  $('#div1').children('span').length;

  具体jQuery代码:

  $(".www111cnnet ul li:nth-child(5)").addClass("com");

  已经成功给每个ul下的第5个li添加class为com

  当然,也可以直接添加 CSS 代码:

  $(".www111cnnet ul li:nth-child(5)").css({"padding-right":"5px"});

  nth-child:英文中的缩写,n-th,表示第几个,1,2,3分别用 first、second、third 单词,从4开始便为数字的单词+th,如4th、5th、6th等等

  获取ul下的第一个li

  $("ul li:first-child")

  获取ul下的最后一个li

  $("ul li:last-child")

  例子

 代码如下  

<div class="Bg01">
<ul>
<li class="Bold">黑域名告警</li>
<li>总数:<span class="Mycolor">24条</span></li>
<li>未处理:<span class="Myred">03条</span></li>
</ul>
</div>

  想获取上面class=“Bold”的元素,写法如下

 代码如下  

:$(this).children("ul").children("li:first-child").css("color","#FF6666");

  补充

  获取同级元素:

  1、next([expr]):

  获取指定元素的下一个同级元素(注意是下一个同级元素哦)

 代码如下  

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').next().css('background-color', 'red');
</script>

</body>
</html>

  这个例子的结果是,只有list item 4背景色变为红色

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

    用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

    2017-05-14 17:01

  • 引用Google或微软的CDN加载jQuery

    引用Google或微软的CDN加载jQuery

    2017-05-14 11:00

  • jQuery - AJAX get()/post() 方法

    jQuery - AJAX get()/post() 方法

    2017-05-13 15:01

  • jquery hide(),show()方法用法详解

    jquery hide(),show()方法用法详解

    2017-05-13 14:02

网友点评