CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Lemex
Lemex

Reputation: 3794

Jquery Get Child DIV Within DIV

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

Upvotes: 6

Views: 34782

Answers (9)

CodeToLife
CodeToLife

Reputation: 4141

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>

Upvotes: 0

Eldric Dsouza
Eldric Dsouza

Reputation: 1

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>

Upvotes: 0

Nirmal
Nirmal

Reputation: 4829

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

Upvotes: 1

Sirko
Sirko

Reputation: 74036

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

Upvotes: 12

Pranay Rana
Pranay Rana

Reputation: 176896

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

Upvotes: 1

Beat Richartz
Beat Richartz

Reputation: 9622

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

Upvotes: 2

Franquis
Franquis

Reputation: 743

This is working for me....

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

Upvotes: 1

Matt
Matt

Reputation: 1973

Try this,

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

Check there is no space before ':'

Upvotes: 2

Seimen
Seimen

Reputation: 7250

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

Upvotes: 6

Related Questions