zoukankan      html  css  js  c++  java
  • jQuery 子元素选择

    对于如下代码片段  如何对河meishi这个div的子DIV呢?

    <div id="vertical-Menu-meishi" class="J-nav-item">
        <div id="yui_3_12_0_1_1387858313977_228"  >
            <div id="yui_3_12_0_1_1387858313977_227" ></div>
            <div id="yui_3_12_0_1_1387858313977_424"  ></div>
        </div>
    </div>

    参考http://api.jquery.com/first-child-selector/

    http://api.jquery.com/nth-child-selector/

    不过上述都没有说明  :nth-child(2) 可以用在children()的括号中... 

    不过想想  :nth-child(2)本身是选择器表达式   children('selector')  括号中也是选择器表达式

    所以它就干脆没说

    stackoverflow上又两个问答也很好的

    http://stackoverflow.com/questions/4727263/jquery-get-second-child

    http://stackoverflow.com/questions/5440792/getting-the-2nd-child-element

    (后一篇中第一个回答的方案3 似乎行不通)

            $("#yui_3_12_0_1_1387858313977_424").css('display', 'block');//ok
            //表示的是获取#vertical-Menu-meishi下得第一个DIV元素         
            alert($("#vertical-Menu-meishi div:first-child").attr("id"));//ok
            alert( ($("#vertical-Menu-meishi").children(':first-child')).attr("id"));//ok
            //获取第一个子元素的第一个子元素
            alert( $("#vertical-Menu-meishi").children(':first-child').children(':first-child').attr('id') );//ok
            //获取第一个子元素的第二个子元素
            alert( $("#vertical-Menu-meishi").children(':first-child').children(':nth-child(2)').attr('id') );//ok
    
            //或者使用下面的办法  感觉更加容易理解
            //获取第一个子元素
            alert( $("#vertical-Menu-meishi").children('div').eq(0).attr('id') );//ok
            获取第一个子元素下的第二个子元素
            alert(  $("#vertical-Menu-meishi").children('div').eq(0).children('div').eq(1).attr('id')  );//ok

    显然后面几种方式更好  第一个的话  第一种形式 对于$(this)这样的表达式就无能为力啦

  • 相关阅读:
    机器学习之--数据构造,函数图显示
    python 用xlwt包把数据导出到excel表中
    python实现Hbase
    Hbase命令
    scrapy Formrequest用法(豆瓣登录案例)
    scrapy meta不用pipe用命令-o
    scrapy之Crawspider 腾讯招聘实战案例
    scrapy选择器归纳
    scrapy response.xpath可以提取包含字符XX的标签
    初涉.....编码__列表__字典
  • 原文地址:https://www.cnblogs.com/cart55free99/p/3511419.html
Copyright © 2011-2022 走看看