Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I select a child element by ID with jQuery?

Tags:

jquery

I'm having trouble selecting the text inside a span element that resides in another container.

The situation I'm trying to solve is on the page we might have 10-15 different addresses at a time (so I'm appending a record Id onto the div's ID when the page is created). I need to be able to select a specific one by an ID, and then find the individual address pieces inside it.

An example of the HTML Output would be as follows:

<div id="Address_1">
    <span id="Address">Some Address</span>
    <span id="City">Some City</span>
    <span id="State">Some State</span>
    <span id="Zip">Some Zip</span>
</div>

<div id="Address_2">
    <span id="Address">Some Address</span>
    <span id="City">Some City</span>
    <span id="State">Some State</span>
    <span id="Zip">Some Zip</span>
</div>

I've tried using the following (and many, many variations):

$("#Address_" + Id).children().find("#Address").text;
$("#Address_" + Id).find("span#Address").text;
$("#Address_" + Id).find("span").find("#Address").text;

(I also can use a class inside the spans instead of a ID, but I'd like to know how to do it by ID as well.)

I'm sure it's something very simple that I'm doing incorrectly but I can seem to figure it out. I've searched a lot of questions on here as well looking for a similar one but I can't seem to find what I'm looking for. I apologize in advance if I simply didn't search using the right phrasing.

Any and all help is very much appreciated.

UPDATE: Here is my solution, thanks to the help of Ken Redler.

<div id="Address_1">
    <span class="Address">Some Address</span>
    <span class="City">Some City</span>
    <span class="State">Some State</span>
    <span class="Zip">Some Zip</span>
</div>

$("#Address_" + Id).find("span.Address").text();
like image 710
Delebrin Avatar asked Aug 20 '10 20:08

Delebrin


People also ask

How do you select element by id in jQuery?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

How do you select an element with ID name?

The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

How do you get the children of the $( this selector?

Answer: Use the jQuery find() Method You can use the find() method to get the children of the $(this) selector using jQuery. The jQuery code in the following example will simply select the child <img> element and apply some CSS style on it on click of the parent <div> element.


1 Answers

IDs must be unique across the whole document. You should make the "inner" IDs classes instead. Then you'd have:

$('#Address_'+Id).find('span.address').text();

As per LarsH's comment, in your document, where you have:

<div id="Address_1">
    <span id="Address">Some Address</span>

you'd change it to:

<div id="Address_1">
    <span class="Address">Some Address</span>

If there's more than one of a particular ID, your results will be unpredictable at best.

like image 129
Ken Redler Avatar answered Oct 17 '22 01:10

Ken Redler