how to group html elements using jquery - list items

Question

User668774724 posted

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

Answer 1

User-1151440187 posted

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!