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();
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With