问题

I have the following HTML code within the body:

<div id="hidden">

</div>

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

    </div>
</div>

I am using the following code to get the child

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

But this returns "hidden" when I want it to return firstChildDiv, I have tried things like...

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

I know its a simple thing to do, but cant seem to see where I am going wrong...

Thanks

回答1:

Your last selector

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

works fine, if you correct the typo in the HTML (see this fiddle). It says mainContianer instead of mainContainer.

But, anyway, why don't you select simply by the id, if that element has an id?

$( '#firstChildDiv' )

回答2:

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

回答3:

Try this,

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

Check there is no space before ':'

回答4:

Actually, you have a typo there in your html

<div id="mainContianer">

should be

<div id="mainContainer">

Then you can do

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

This uses prop rather than attr, which is slower and old jQuery Syntax

回答5:

This is working for me....

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

回答6:

this all return you first child of parent--in your case replace parent by mainContianer

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


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


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


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


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

try - Child Selector (“parent > child”)

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

also try out

$("div div:first-child")

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

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

来源：https://stackoverflow.com/questions/11468122/jquery-get-child-div-within-div

标签

javascript

jquery

html

jquery-selectors

Jquery Get Child DIV Within DIV

问题