获取任何div的ID及其从php返回到jquery的子代的ID

Question

Description :

After some php work at the end,my php returns the following output to the jquery which called this page

<div id = "container1">
   <div id = "chicken1"></div>
   <div id = "soup1"></div>
</div>


<div id = "container2">
   <div id = "chicken2"></div>
   <div id = "soup2"></div>
</div>

and so on ...

Now in the jquery call back it gets lot of results. So among the results I want to search for the divs with specific id's or get those id's. How can I do that.

eg lets say I want all the id's that say chicken1 , chicken2 and so on .... Is there a way to do that ??

Following Is The Code :

PHP

echo '<div id = "container1">
       <div id = "chicken1"></div>
       <div id = "soup1"></div>
    </div>


    <div id = "container2">
       <div id = "chicken2"></div>
       <div id = "soup2"></div>
    </div>';

JQUERY

$.post("../PHP/get_all_new_msgs_on_profile.php",{arr:data},function(result) { $(result).hide().prependTo("#new_buddy_messages_on_profile").fadeIn("fast").slideDown("slow"); } Now the $(result) has the divs returned by the php how can I extract the id's of the divs from it ... PLease ignore any typing mistake . thanks :)

Answer 1

First of all change <div id='container'> to <div class='container'> after that try using this.

$('.container [id*=chicken]').each(function(index){
   console.log($(this).attr('id'));
});

Answer 2

As mentioned by @Mritunjay your id's must all be unique. If you need to assign or access multiple elements by name, you should give them a class ( http://www.w3schools.com/tags/att_global_class.asp )

For more info see this

jQuery selectors:

• ID: $("#myId")
• Class: $(".myClass")
• Element: $("element") - ie $("div")

For a list of all jQuery selectors see this link: http://api.jquery.com/category/selectors/

To get the child element of a specific element, use children() . An example of its implementation is as follows:

$(".myClass").children("div"); //Assuming .myClass has a child `div` element

---

In your case...

HTML

<div id = "container">
   <div id = "chicken1"></div>
   <div id = "soup"></div>
</div>


<div id = "container">
   <div id = "chicken2"></div>
   <div id = "soup"></div>
</div>

Should be changed to:

<div class = "container">
   <div id = "chicken1"></div>
   <div class = "soup"></div>
</div>


<div class = "container">
   <div id = "chicken2"></div>
   <div class = "soup"></div>
</div>

and to get each element with the class .container assigned, use $(".container") to get each child element of the class .container with the various id's beginning with chicken you can use the following:

$(".container").children('*[id^="chicken"]').each(function () {
    //Something here
});

As in this fiddle

Answer 3

You should change all the id's to classes, because id's need to be unique.

You could use the :has selector

$(".container:has(.chicken2)")