how to get the DIV ID from given HTML in JQuery

Question

I have below HTML format:

<ul class="whatlike-list">
    <li class="first">
        <a href="/SessionHandler.aspx" class="button-flight-search">Search for Flights</a>
        <div class="open-block-holder">
            <div id="slideFlightSearch" class="open-block" style="display: block; left: 650px;">

            </div>
        </div>
    </li>
</ul>

Now I am looking to get DIV ID="slideFlightSearch" on the click of link "Search for Flights", I have got the class "button-flight-search" in my $this object. Something like below in my JQuery.

$(link).click(function()
{
    alert($(this).attr("class"));
})

In the above alert I am getting the class "button-flight-search", however I need the inner DIV ID slideFlightSearch

Please suggest using JQuery.

karim79 · Accepted Answer · 2011-01-23 11:55:21Z

2

You can use .next and .find, like this:

$(link).click(function() {
    var id = $(this).next(".open-block-holder")
                    .find("div") // or .find("div.open-block")
                    .attr("id");
});

edited Jan 23, 2011 at 11:55

answered Jan 23, 2011 at 11:50

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

David Hedlund Over a year ago

Isn't the question about getting to #slideFlightSearch w/o knowing the ID? If we know the id, we could just skip immediately to $('#slideFlightSearch').doSomething();

Manoj Singh Over a year ago

No I need just the div ID, which will be passed in my code for furthur use

karim79 Over a year ago

@David Hedlund - Thank you for the input. Fixed.

Felix Kling Over a year ago

@MKS: Depending on your structure, you could add .find('div:first') to only get the first div (or any other way that gives you the first only).

David Hedlund Over a year ago

.attr('id') will always just yield the ID of the first element in the set, regardless of whether there were more that were matched by the selector...

|

David Thomas · Accepted Answer · 2011-01-23 11:58:21Z

1

You could try:

$('a').click(
    function(){
        var theDivID = $(this).closest('li').find('.open-block').attr('id');
        alert('The div's ID is: ' + theDivID);
        return false; // If you need to prevent the default action of clicking on a link.
    });

answered Jan 23, 2011 at 11:58

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Gan · Accepted Answer · 2011-01-23 12:08:07Z

0

A method using your HTML structure without using ID or class attributes.

$(link).click(function()
{
    alert($(this).next()         //get div with class "open-block-holder".
                 .children()     //get the inner div with class "open-block".
                 .attr("id") ) ; //get the ID.

})

answered Jan 23, 2011 at 12:08

Gan

4,9973 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

how to get the DIV ID from given HTML in JQuery

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related