how to select child elements through jquery

Question

<div id="container_security" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; height: 485.40000009536743px;">
        <div class="container_sec_class_container" style="display: block;">
            <div class="cont_sec_sec" style="height: 70px;">
                <p class="container_title">
                    Name
                </p>
                <input id="container_name" readonly="readonly" type="text">
                <p class="container_secclass_title">Security Class</p>
                <dl class="container_security_class dropdown">
                    <dt>
                     <span class="parent">
                      <span class="container_secclass_dropdown">Shipping and Receiving</span>

In the above code I want to set the title attribute to the bottom most element of above DOM tree. I want to set titles of all child spans under span whose class is parent.

i m trying the code written below but it is not working

var dropDownItem = $('#container_security > div > dl > dt > span > span');
dropDownItem.attr('title', dropDownItem.val());

$('.parent span').attr("title","Temp Title"); – patel.milanb Dec 31 '13 at 15:36 — patel.milanb, Dec 31 '13 at 15:36

score 3 · Accepted Answer · answered Dec 31 '13 at 15:32

3

I'd suggest using a descendant selector (rather than a brittle series of child selectors) with its class:

var dropDownItem = $('#container_security .container_secclass_dropdown');
dropDownItem.attr('title', dropDownItem.val());

But note that val doesn't apply to span elements (only form fields), so the dropDownItem.val() part doesn't make sense. Perhaps you wanted .text().

answered Dec 31 '13 at 15:32

T.J. Crowder

1,031,962
187
1,923
1,875

what about `$('#container_security .container_secclass_dropdown').attr('title', function(){ return $(this).text() })` – Arun P Johny Dec 31 '13 at 15:38
@ArunPJohny: :-) If you want to avoid the variable, sure. It's extra overhead, but nothing that means anything. – T.J. Crowder Dec 31 '13 at 15:43

score 1 · Answer 2 · edited May 23 '17 at 11:56

Try this:

$spanelements = $("#container_security .container_secclass_dropdown");
$spanelements.attr("title", $spanelements.text());

Code Explanation:

It pretty much selects the div with the id of container_security then looks down and down for it's descendand and then when it finds an element with the class of .container_secclass_dropdown it then selects that element and then it sets it's attribute.

This question might help you with what type of selector to choose.

This question might help you in choosing .text() or .val()

score 1 · Answer 3 · answered Dec 31 '13 at 15:34

Try this one only if you want to play with last span

$('span:last').attr({title:$('span:last').text()})

or if with all parent classes spans, then use

$(document).ready(function() {
      $('span.parent').children().each(function() {
         $(this).attr({title:$(this).text()});
      });
});

patel.milanb · Answer 4 · 2013-12-31T15:43:09.610

1

may be this: as you said that you want to set title to all span under span whose class is parent

$('.parent span').attr("title","Temp Title");

if you have more than one span, you try the following..

$('.parent span').each(function() { 
    $(this).attr("title",$(this).html());
});

edited Dec 31 '13 at 15:43

answered Dec 31 '13 at 15:38

patel.milanb

5,822
15
56
92

score 0 · Answer 5 · answered Dec 31 '13 at 16:10

This code selects all the elements at the Bottom-most level of the DOM tree so in this case the bottommost span is selected.

CODE

$children = $("body").children();
while ($children.children().length > 0) {
    $children = $children.children();
}
//Now the variable $children is the set of elements at the bottom-most level of DOM.
console.log($children.attr('title', "bottom-most element in DOM tree"));

Fiddle demo

how to select child elements through jquery

5 Answers5

CODE