jquery children 问题

为什么是 undefined

html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>


<div id="div1">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</div>






<script>
$(function() {
    $("#div1").on("click", function(){
        var wz = $(this).children("li").html();
        console.log(wz);
    });
});
</script>


</body>
</html>

-----------------------------------------------------------------------------------

第一个 wz 是 undefined 为什么
下面这2个 $(this) 为什么不一样
dianji() $(this) 指什么

html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>


<div id="div1" onClick="dianji()">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</div>





<script>
function dianji() {
    var wz = $(this).children().children("li").eq(0).html();
    console.log(wz);
}

$(function() {

    $("#div1").on("click", function(){
        var wz = $(this).children().children("li").eq(0).html();
        console.log(wz);
    });

});

</script>


</body>
</html>

  $("#div1").on("click", function(){
        var wz = $(this).children("li").html();//查询的是直接子节点,也就是ul ,用$(this).find("li").html(); 试下
        console.log(wz);
    });

我又来挑刺了，楼主对jquery函数认识不清楚，你得搞清楚什么是子节点，什么是后代节点，并且搞清楚children函数获取的是什么。

首先$(this).child()是获取的div的子元素，即ul节点，并且只有这一个字节点，而楼主要获取的是li，即为后代节点，当然获取不到了。

如果要获取到的话可以这样做：$(this).find("li")

查下api就知道了

children()只考虑子元素而不考虑所有后代元素

$(this).children("li")的size为0，不是任何节点

两点需要注意：
1. children方法相当于css的 > 选择器，只选择子辈的，不管孙子辈的。
2. 你这里用html方法，只会返回选择的子集的第一个元素的内容。

【热门文章】