CODEWITHSUNDEEP
jquery
Computer User
Computer User

Reputation: 2869

jQuery nested selector is not working but find() is working fine

I have code:

<script>

jQuery.ajax({
    type: 'POST',
    url: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    dataType: 'json',
    data: { 'location': 'New York, NYC' },
    success: function(listings) {
        jQuery("div[id='clinic_name']").each(function(index) {
            jQuery(this).find("h2").text(listings[index].name);
        });
    }});

</script>

on page: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Its working fine.

I select all DIV with id=clinic_name and then select h2 tag in it and change its inner text.

The main line is:

jQuery("div[id='clinic_name']").each(function(index) {
                jQuery(this).find("h2").text(listings[index].name);

Its working fine.

But if I try:

jQuery("div[id='clinic_name']" > h2).each(function(index) {
            jQuery(this).text(listings[index].name);

It doesn't work. I was trying to select h2 directly in the DIV selector. Am I not writing jQuery("div[id='clinic_name']" > h2) selector properly?

I think its better to select the h2 tag in the main DIV selector. Can it be done?

Upvotes: 1

Views: 47

Answers (1)

Clyde Lobo
Clyde Lobo

Reputation: 9174

The problem is with your selector and not jquery,

The > means only direct descendants, i.e immediate children,

So instead of jQuery("div[id='clinic_name']" > h2) you should have jQuery("div[id='clinic_name']" h2)

FYI, ID's are supposed to be unique. Also div#clinic_name will be faster than div[id='clinic_name']

Upvotes: 2

Related Questions