how to group html elements using jquery - list items RSS

• • Reply
  naijacoder74

  Member

  8 Points

  246 Posts

  how to group html elements using jquery - list items

  Jul 20, 2020 09:06 AM|naijacoder74|LINK

  Hi All,
  I have this html element output from a list.
  I would like to group them by the branch (class=branch)
  Can i use jquery to re order this?
  I'm looking for this output

  Branch Name (Strategy)
  - Franklin
  - Industry Skills
  Branch Name (Business)
  - Franklin
  - Industry Skills

  HTML below

  <div id="contacts">
  <div id="contactsContainer">
  <div class="branch">Strategy</div>
  <div id="contactsImage1" class="contactsImage">
  </div>
  <div class="contatctsName"><a href=""" class="nameLink"
  title="Email">Franklin</a></div>
  <div title="Principal"> Industry Skills</div>
  <div><i class="ms-Icon ms-Icon--Phone" aria-hidden="true"></i> 965</div>
  </div>
  <div id="contactsContainer">
  <div class="branch">Business </div>
  <div id="contactsImage1" class="contactsImage">
  </div>
  <div class="contatctsName"><a href=""" class="nameLink"
  title="Email">Franklin</a></div>
  <div title="Principal"> Industry Skills</div>
  <div><i class="ms-Icon ms-Icon--Phone" aria-hidden="true"></i> 965</div>
  </div>
  <div id="contactsContainer">
  <div class="branch">Strategy</div>
  <div id="contactsImage1" class="contactsImage">
  </div>
  <div class="contatctsName"><a href=""" class="nameLink"
  title="Email">Franklin</a></div>
  <div title="Principal"> Industry Skills</div>
  <div><i class="ms-Icon ms-Icon--Phone" aria-hidden="true"></i> 965</div>
  </div>
  <div id="contactsContainer">
  <div class="branch">Business </div>
  <div id="contactsImage1" class="contactsImage">
  </div>
  <div class="contatctsName"><a href=""" class="nameLink"
  title="Email">Franklin</a></div>
  <div title="Principal"> Industry Skills</div>
  <div><i class="ms-Icon ms-Icon--Phone" aria-hidden="true"></i> 965</div>
  </div>
  </div>

  Thanks in Advance

• • Reply
  shaili shah

  Member

  115 Points

  98 Posts

  Re: how to group html elements using jquery - list items

  Jul 21, 2020 05:13 AM|shaili shah|LINK

  Use this type of jquery into your code.

  <div id="stuffs">
  <li>Strategy</li>
  <li>Business</li>

  <li title ="Business">Franklin</li>
  <li title ="Strategy">Franklin</li>
  <li title ="Strategy">Industry Skills</li>
  <li title ="Business">Industry Skills</li>

  </div>

  <script>

  $("#stuffs li").each(function(){
  $("#stuffs li[title='"+$(this).text()+"']").insertAfter($(this)).wrapAll("<ul />");
  });

  </script>

  I hope it'll help.

  Thanks!

  ASP.NET consulting companies india
  https://www.ifourtechnolab.com/asp-dot-net-enterprise-content-management