SCRIPT

Question

我在正文中有以下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')

我知道这是一件很简单的事情，但似乎无法看到我出错的地方......

由于

Answer 1

你的最后一个选择器

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

如果你纠正HTML中的拼写错误，

工作正常（请参阅此fiddle）。它显示mainContianer而不是mainContainer。

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

$( '#firstChildDiv' )

Answer 2

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

Answer 3

试试这个，

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

检查'：'

之前没有空格

Answer 4

实际上，你的html中有一个拼写错误

<div id="mainContianer">

应该是

<div id="mainContainer">

然后你可以做

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

这使用prop而不是attr，这是较慢和旧的jQuery语法

Answer 5

这一切都归你父母的第一个孩子 - 在你的情况下通过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")

Answer 6

这对我有用....

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

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

Answer 8

SCRIPT

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

HTML CODE

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

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

Jquery在DIV中获取子DIV

9 个答案:

SCRIPT

HTML CODE