search

Home  >  Q&A  >  body text

javascript - 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>


<p id="p1">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</p>






<script>
$(function() {
    $("#p1").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>


<p id="p1" onClick="dianji()">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</p>





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

$(function() {

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

});

</script>


</body>
</html>
天蓬老师天蓬老师2902 days ago336

reply all(4)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 15:11:34

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

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

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

    reply
    0
  • PHPz

    PHPz2017-04-10 15:11:34

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

    reply
    0
  • 黄舟

    黄舟2017-04-10 15:11:34

    查下api就知道了

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

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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 15:11:34

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

    reply
    0
  • Cancelreply