【问题标题】：Jquery Get Child DIV Within DIVJquery在DIV内获取子DIV
【发布时间】：2012-07-13 03:57:10
【问题描述】：

我在正文中有以下 HTML 代码：

<div id="hidden">

</div>

<div id="mainContianer">
    <div id="firstChildDiv">

    </div>
</div>

我正在使用下面的代码来获取孩子

$("div:first-child").attr('id')

但是当我希望它返回 firstChildDiv 时，它会返回“隐藏”，我尝试过类似...

$("div[mainContainer ] div:first-child").attr('id') 
$("div[id=mainContainer ] :first-child").attr('id') 
$("#mainContainer :first-child").attr('id')

我知道这是一件简单的事情，但似乎看不出我哪里出错了......

谢谢

【问题讨论】：

打字错误 mainContianer -> mainContainer
主项目中的错字，你所有的代码都是正确的

标签： javascript jquery html jquery-selectors

【解决方案1】：

你的最后一个选择器

$("#mainContainer :first-child").attr('id')

如果您更正 HTML 中的错字，则可以正常工作（请参阅fiddle）。它说 mainContianer 而不是 mainContainer。

但是，无论如何，如果该元素具有id，您为什么不简单地选择id？

$( '#firstChildDiv' )

【讨论】：

第一个注意到恭喜你:)
从他的问题你会建议他事先不知道 id 但想知道第一个子 div 的 id...

【解决方案2】：

$('#mainContainer > div:first-child').attr('id');

【讨论】：

哈哈，如果“undefiend”是故意的（指的是原始问题中的错字，不是在取笑你）
你的容器是命名为“mainContianer”还是“mainContainer”？我从你的问题中复制了它，我认为这是错误的......所以更新了我的答案。
这是我的代码和我的项目代码中的错字，所以你所有的代码都是正确的:)
另一个问题：$("#mainContainer :first-child").attr('id') 和你的有什么区别 > 做什么
如果容器中有多个级别，> div 会加快速度，因为它不会收集其中的所有元素，而只会收集第一级的 div 并获取 :first-他们的孩子w3.org/TR/CSS2/selector.html#child-selectors jsperf.com/first-child-against-div-first-child

【解决方案3】：

试试这个，

$("#mainContianer:first-child").attr("id")

检查':'之前没有空格

【讨论】：

【解决方案4】：

实际上，你的 html 中有一个错字

<div id="mainContianer">

应该是

<div id="mainContainer">

那你就可以了

$("#mainContainer div:first-child").prop('id')

这使用prop而不是attr，后者更慢且旧的jQuery语法

【讨论】：

抱歉混淆是 PROP 比 attr 慢还是快？
有充分的理由：A perf test 和 Perfectly well answered so question

【解决方案5】：

这对我有用....

$(document).ready(function(){
    var a =$("#mainContainer div:first-child").attr('id');
    alert(a);
});

【讨论】：

【解决方案6】：

这一切都返回你父母的第一个孩子——在你的情况下，用 mainContianer 替换父母

$('#parent').children(":first") 


$('#parent').children(":first-child") 


$( $('#parent').children()[0] ) 


$('#parent').find(":first") 


$('#parent').find(":nth-child(1)")

试试 - Child Selector (“parent > child”)

$("div > div").attr('id')

也可以试试

$("div div:first-child")

【讨论】：

jsperf.com/fastest-get-first ... 就个人而言，我喜欢 $container.children().first().attr('id');大多数，因为它是最易读的恕我直言，也是最快的方法之一。

【解决方案7】：

    <html>
        <head>
            <script>
                function getDiv(){
                alert("answer = "+$('#mainContianer div:first-child').attr('id'));

                }
            </script>
        </head>
        <body>

            <div id="hidden"></div>

                 <div id="mainContianer">
                    <div id="firstChildDiv">
                    </div>
                 </div>

                <button onclick="getDiv()">click</button>
    </body>
<html>

【讨论】：

【解决方案8】：

脚本

<script language="JavaScript">
    jQuery(document).ready(function($) { 
    $("#MY_BUTTON").click(function(event) {
                 $("div#PARENT_DIV").find("#CHILD_DIV").hide();
             });    
});
</script>

HTML 代码

<div id="PARENT_DIV">
        <h1 class="Heading">MY HTML PAGE TEST</h1>
        <br />
        <div id="CHILD_DIV">THIS IS MY CHILD DIV</div>
 </div>

    <div class="MY_BUTTONS"> 
        <a class="MySubmitButton" id="MY_BUTTON">
            <span>Test it!</span>
        </a>
     </div>

【讨论】：

更快的选择器：$("#mainContainer :first-child").attr('id')

【解决方案9】：

现在是 2020 年，使用 jquery 可能是这样的：

    function myClickOnDiv(divPrm) {
        let div=$(divPrm);
        let targetElement=div.find('#my_id')
    }

如果说你的 div 看起来像这样：

<div onclick=myClickOnDiv(this)><label id="my_id"></label></div>

【讨论】：