jQuery - get all divs inside a div with class container

Question

Scenario   I got a menu containing links   Main Menu Item -------------- Sub  Show Grid  gt  SubSub   lt a gt Show  first lt  a gt                            lt a gt Show  second lt  a gt                            lt a gt Show  third lt  a gt    Now i need to find all divs with an css  ID who are first level DOM elements inside the  container div  These elements should get appended to  Sub  Show Grid  and add a class via a click on it     lt  -- The mark up -- gt   lt div class  container  gt       lt div id  first  gt 1st lt  div gt       lt div id  second  gt 2nd lt  div gt       lt div id  third  gt 3rd lt  div gt   lt  div gt    Question     How would i find the first level div with an  undefined not known   ID with jQuery  How can i interact with the result in php - will I get an array as result to build the SubSub menu out of it    Thanks in advance     Edit  1  To make it more clear what I m trying to do - In pseudo code    divs received from jquery fn    how do I get the divs  IDs   as array    and interact with them in the following code    foreach    divs received from jquery fn as  div         add menu item  array             parent    gt   Sub  Show Grid            name      gt   Show     div           href      gt               meta      gt  array                            onclick    gt   jQuery   container     div  toggleClass  showgrid                              Edit  2  The  real world  example  The output is an onclick event for an a-link  My problem is that i want to call the function foreach for every div id  below the  container div and simply don t know how to interact properly with javascript  amp  php     gt   lt script type  text javascript  gt      jQuery   container  gt  div id    each function            var context     this            lt  php             SHOWGRID - parts             since v0 3          wp admin bar- gt add menu     trigger the function via the global  wp admin bar var that calls the class             array                    parent      gt   showgrid     parent menu item                   id          gt   showgrid -     this id    menu item ID                   title       gt  sprintf     menu item label                            1 s show grid parts  2 s 3 s   OXO TEXTDOMAIN                          lt span style  background  none   gt                          lt span class  showgridparts-on hide  gt  amp  x2714  lt  span gt                          lt span class  showgridparts-off  gt  amp times  lt  span gt                                         href        gt        stays empty to not trigger anything                   meta        gt  array     HERE GOES THE ACTUAL jQuery FUNCTION                      onclick      gt   jQuery       this id  toggleClass  showgrid    jQuery   showgridparts-on   toggleClass  hide    jQuery   showgridparts-off   toggleClass  hide    return false                                                          gt           lt  script gt   lt  php

User · Answer

To get all divs under  container   use the following       container gt div      or     container   children  div      You can stipulate a specific  id instead of div to get a particular one    You say you want a div with an  undefined  id  if I understand you right  the following would achieve this       container gt div id

User · Answer

From http   api jquery com jQuery      Selector Context   By default  selectors perform their searches within the DOM starting at the document root  However  an alternate context can be given for the search by using the optional second parameter to the     function  For example  to do a search within an event handler  the search can be restricted like so        div foo    click function             span   this   addClass   bar              When the search for the span selector is restricted to the context of this  only spans within the clicked element will get the additional class    So for your example I would suggest something like      div     container   each function           do whatever

User · Answer

Known ID      container  gt   first      or      container   children   first      or since IDs should be unique within a single document       first      The last one is of course the fastest   Unknown ID  Since you re saying that you don t know their ID top couple of the upper selectors  where  first is written   can be changed to       container  gt  div        container   children  div      The last one  of the first three selectors  that only uses ID is of course not possible to be changed in this way   If you also need to filter out only those child DIV elements that define ID attribute you d write selectors down this way       container  gt  div id         container   children  div id       Attach click handler  Add the following code to attach click handler to any of your preferred selector      use selector of your choice and call  click  on it     container  gt  div   click function           if you need element s ID     var divID   this id      cache your element if you intend to use it multiple times     var clickedDiv     this          add CSS class to it     clickedDiv addClass  add-some-class           do other stuff that needs to be done       CSS3 Selectors specification  I would also like to point you to CSS3 selector specification that jQuery uses  It will help you lots in the future because there may be some selectors you re not aware of at all and could make your life much much easier   After your edited question  I m not completey sure that I know what you re after even though you ve written some pseudo code    Anyway  Some parts can still be answered       container  gt  div id    each function        var context     this          get menu parent element  Sub  Show Grid        maybe I m not appending to the correct element here but you should know     context appendTo context parent   parent         context text  Show      this id       context attr  href            context click function evt           evt preventDefault              this  toggleClass  showgrid                 the last thee context usages could be combined into a single chained one   context text      attr      click         Regarding DOM elements  You can always get the underlaying DOM element from the jQuery result set          get 0     or        0    will get you the first DOM element from the jQuery result set  jQuery result is always a set of elements even though there s none in them or only one   But when I used  each   function and provided an anonymous function that will be called on each element in the set  this keyword actually refers to the DOM element          each function        var DOMelement   this      var jQueryElement     this                 I hope this clears some things for your

User · Answer

To set the class when clicking on a div immediately within the  container element  you could use    lt script gt      container gt div   click function                this  addClass  whatever            lt  script gt

[jquery] jQuery - get all divs inside a div with class ".container"

Examples related to jquery

Examples related to dom