jQuery each - Getting li elements inside an ul

Question

I have this HTML on my page    lt div class  phrase  gt       lt ul class  items  gt           lt li class  agap  gt  lt ul gt  lt li gt TEXT1 lt  li gt  lt  ul gt  lt  li gt           lt li class  agap  gt  lt ul gt    lt  ul gt  lt  li gt   lt  -- empty ul -- gt           lt li class  aword  gt TEXT2 lt  li gt                  lt  ul gt   lt  div gt    lt div class  phrase  gt       lt  div gt    I would like to get for each  phrase  all the elements in  items  in a text variable  like this   var string    TEXT1 - BLANK - TEXT2     I currently have this javascript code    lt script gt    function             phrase  items   each function            var myText                   At this point I need to loop all li items and get the text inside            depending on the class attribute          alert myText                lt  script gt    How can I iterate all  lt li gt  inside  items   I was trying different ways but I didn t get good results

User · Answer

function             phrase  items   each function i  items list           var myText                  items list  find  li   each function j  li               alert li text                         alert myText

User · Answer

Given an answer as high voted and views  I did find the answer with mixed of here and other links   I have a scenario where all patient-related menu is disabled if a patient is not selected   Refer link - how to disable a li tag using JavaScript     css  disabled      pointer-events none      opacity 0 4       jqvery    li a   addClass  disabled       remove  disabled when you are done   So rather than write long code  I found an interesting solution via CSS    x000D   x000D    document  ready function      x000D   var PatientId    x000D     var PatientId  1     remove to test enable i e  patient selected x000D   if  typeof PatientId     undefined     PatientId          PatientId    0    PatientId    null    x000D    console log PatientId   x000D        dvHeaderSubMenu a   each function         x000D       this  addClass  disabled    x000D          x000D    return  x000D     x000D     x000D   disabled  x000D      pointer-events none  x000D      opacity 0 4  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  dvHeaderSubMenu  gt  x000D        lt ul class  m-nav m-nav--inline pull-right nav-sub  gt  x000D         lt li class  m-nav  item  gt  x000D          lt a href     onclick  console log  PatientMenu Clicked     gt  x000D           lt i class  m-nav  link-icon fa fa-tachometer  gt  lt  i gt  x000D          Overview x000D          lt  a gt  x000D         lt  li gt  x000D   x000D         lt li class  m-nav  item active  gt  x000D          lt a href     onclick  console log  PatientMenu Clicked     gt  x000D           lt i class  m-nav  link-icon fa fa-user  gt  lt  i gt  x000D          Personal x000D          lt  a gt  x000D         lt  li gt  x000D               lt li class  m-nav  item m-dropdown m-dropdown--inline m-dropdown--arrow  data-dropdown-toggle  hover  gt  x000D          lt a href     class  m-dropdown  toggle dropdown-toggle  onclick  console log  PatientMenu Clicked    gt  x000D           lt i class  m-nav  link-icon flaticon-medical-8  gt  lt  i gt  x000D          Insurance Claim x000D          lt  a gt  x000D          lt div class  m-dropdown  wrapper  gt  x000D           lt span class  m-dropdown  arrow m-dropdown  arrow--left  gt  lt  span gt  x000D           x000D              lt ul class  m-nav  gt  x000D               lt li class  m-nav  item  gt  x000D                lt a href     class  m-nav  link  onclick  console log  PatientMenu Clicked     gt  x000D                 lt i class  m-nav  link-icon flaticon-toothbrush-1  gt  lt  i gt  x000D                 lt span class  m-nav  link-text  gt  x000D                 Primary x000D                 lt  span gt  x000D                lt  a gt  x000D               lt  li gt  x000D               lt li class  m-nav  item  gt  x000D                lt a href     class  m-nav  link  onclick  console log  PatientMenu Clicked    gt  x000D                 lt i class  m-nav  link-icon flaticon-interface  gt  lt  i gt  x000D                 lt span class  m-nav  link-text  gt  x000D                 Secondary x000D                 lt  span gt  x000D                lt  a gt  x000D               lt  li gt  x000D               lt li class  m-nav  item  gt  x000D                lt a href     class  m-nav  link  onclick  console log  PatientMenu Clicked    gt  x000D                 lt i class  m-nav  link-icon flaticon-healthy  gt  lt  i gt  x000D                 lt span class  m-nav  link-text  gt  x000D                 Medical x000D                 lt  span gt  x000D                lt  a gt  x000D               lt  li gt  x000D              lt  ul gt  x000D             x000D          x000D         lt  li gt  x000D        lt  ul gt              x000D   lt  div gt  x000D   x000D   x000D

User · Answer

First I think you need to fix your lists  as the first node of a  lt ul gt  must be a  lt li gt   stackoverflow ref   Once that is setup you can do this      note this array has outer scope var phrases            phrase   each function               this is inner scope  in reference to the  phrase element         var phrase                 this  find  li   each function                   cache jquery var             var current     this                  check if our current li has children  sub elements                 if it does  skip it                ps  you can work with this by seeing if the first child                is a UL with blank inside and odd your custom BLANK text             if current children   size    gt  0   return true                  add current text to our current phrase             phrase    current text                           now that our current phrase is completely build we add it to our outer array         phrases push phrase                  note the comma in the alert shows separate phrases     alert phrases     Working jsfiddle   One thing is if you get the  text   of an upper level li you will get all sub level text with it    Keeping an array will allow for many multiple phrases to be extracted     EDIT   This should work better with an empty UL with no LI      outer scope var phrases            phrase   each function           inner scope     var phrase             this  find  li   each function               cache jquery object         var current     this              check for sub levels         if current children   size    gt  0                   check is sublevel is just empty UL             var emptyULtest   current children   eq 0                if emptyULtest is  ul    amp  amp    trim emptyULtest text                          phrase      -BLANK-      custom blank text                 return true                   else                   else it is an actual sublevel with li s              return true                                        if it gets to here it is actual li         phrase    current text                phrases push phrase          note the comma to separate multiple phrases alert phrases

[jquery] jQuery.each - Getting li elements inside an ul

The answer is

Examples related to jquery

Examples related to each

Tags