Jquery Get Child DIV Within DIV

Question

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

typo mainContianer -> mainContainer – tucuxi Jul 13 '12 at 09:57 — tucuxi, Jul 13 '12 at 09:57
Typo in main project to , all your code is correct – Lemex Jul 13 '12 at 10:05 — Lemex, Jul 13 '12 at 10:05

Sirko · Accepted Answer · 2012-07-13T10:03:53.517

12

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

edited Jul 13 '12 at 10:03

answered Jul 13 '12 at 09:57

Sirko

72,589
19
149
183

First one to notice congrats too you :) – Luigi van der Pal Jul 13 '12 at 09:59
From his question you would suggest that he does not know the id beforehand but wants to know the id of the first child div... – Simon Jul 13 '12 at 10:28

score 6 · Answer 2 · answered Jul 13 '12 at 09:54

6

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

answered Jul 13 '12 at 09:54

Simon

7,182
2
26
42

lol if "undefiend" was on purpose (referring to the typo in the original question, not making fun of you) – tucuxi Jul 13 '12 at 09:57
Is your container named "mainContianer" or "mainContainer"? I copied it from your question and I think it's wrong... so updated my answer. – Simon Jul 13 '12 at 09:59
Its a typo in my code here and my project code, so all your code is correct :) – Lemex Jul 13 '12 at 10:02
Another question: whats the differnece between $("#mainContainer :first-child").attr('id') and yours what does the > do – Lemex Jul 13 '12 at 10:09
the > div makes it a bit faster if you have multiple levels in your container, because it then does not collect all the elements inside it but just the divs on the first level and gets the :first-child of them http://www.w3.org/TR/CSS2/selector.html#child-selectors http://jsperf.com/first-child-against-div-first-child – Simon Jul 13 '12 at 10:22

score 2 · Answer 3 · answered Jul 13 '12 at 09:56

2

Try this,

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

Check there is no space before ':'

answered Jul 13 '12 at 09:56

Matt

1,953
1
19
42

score 2 · Answer 4 · answered Jul 13 '12 at 09:59

2

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

answered Jul 13 '12 at 09:59

Beat Richartz

9,474
1
33
50

Sorry for confusion is PROP slower or faster than attr? – Lemex Jul 13 '12 at 10:04
There are good reasons: [A perf test](http://jsperf.com/prop-vs-attr-jquery) and [Perfectly well answered so question](http://stackoverflow.com/questions/5874652/prop-vs-attr) – Beat Richartz Jul 13 '12 at 11:45

Pranay Rana · Answer 5 · 2012-07-13T10:00:21.010

1

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

edited Jul 13 '12 at 10:00

answered Jul 13 '12 at 09:55

Pranay Rana

175,020
35
237
263

1

http://jsperf.com/fastest-get-first ... personally, I like $container.children().first().attr('id'); most, because it's best readable imho and one of the fastest ways. – Simon Jul 13 '12 at 10:16

score 1 · Answer 6 · answered Jul 13 '12 at 09:57

1

This is working for me....

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

answered Jul 13 '12 at 09:57

Franquis

743
1
5
17

Nirmal · Answer 7 · 2012-07-13T10:04:25.690

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

score 0 · Answer 8 · answered May 16 '13 at 09:37

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>

Much faster selector: $("#mainContainer :first-child").attr('id') — Lemex, May 16 '13 at 10:22

CodeToLife · Answer 9 · 2020-09-11T18:43:53.940

0

for now in 2020 with jquery it can be like:

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

if say you div looks like this:

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

edited Sep 11 '20 at 18:43

answered Sep 11 '20 at 18:20

CodeToLife

3,672
2
41
29

Jquery Get Child DIV Within DIV

9 Answers9

SCRIPT

HTML CODE

Linked