zoukankan      html  css  js  c++  java
  • jQuery中获取特定顺序子元素(子元素种类不定)的方法

    提出问题:只已知父元素和父元素中子元素的次序,怎么通过jQuery方法获得该元素?

     1     <p>第一部分:</p>
     2     <ul>
     3         <li>1</li>
     4         <li>2</li> // 选择这个子元素
     5         <li>3</li>
     6     </ul>
     7     <p>第二部分:</p>
     8     <ul>
     9         <li>4</li>
    10         <li>5</li>
    11         <li>6</li>
    12     </ul>

    在不通过选择器的情况下(:first,:last,:nth-child()等),如何通过父元素来选择特定次序的子元素呢?

    方法一:eq(n)

    $("ul").children().eq(1).css("backgroundColor","blue");

    或者$("ul").children().eq(-5).css("backgroundColor","blue");

    方法二:get(n)--注意得到的DOM对象还是jQuery对象

    直接用get()方法得到是DOM对象

    $("ul").children().get(1).style.backgroundColor = "yellow";

    或者$("ul").children()[1].style.backgroundColor = "yellow";

    将get()得到的DOM对象转化为jQuery对象

    $($("ul").children().get(1)).css("backgroundColor","yellow");

    方法三:slice(m,n)

    $("ul").children().slice(1,2).css("backgroundColor","green");

    或者$("ul").children().slice(-5,-4).css("backgroundColor","green");

    小结:以上三种方法eq(n),get(n),slice(m,n)中,m,n均可正可负,以便选取特定元素。其中slice(m,n)功能更为强大,可选取一定范围内的元素。

    选取最后3个:

    $("ul").children().slice(3,6).css("backgroundColor","green");

    或者$("ul").children().slice(-3).css("backgroundColor","green");

    最后一点补充:若选取第一个或者最后一个子元素可用first()、last()方法

    学到即赚到。
  • 相关阅读:
    2015腾讯暑期实习笔试题目
    二叉树的优点和缺点
    pandas对象保存到mysql出错提示“BLOB/TEXT column used in key specification without a key length”解决办法
    事务的隔离机制
    Flink Sink定制开发
    Presto实现定时从配置文件读取配置
    LDAP与Sentry API使用
    Presto压测报告
    PrestoSPI安全扩展
    项目重构总结
  • 原文地址:https://www.cnblogs.com/always-chang/p/5483558.html
Copyright © 2011-2022 走看看