jquery - jquery custom, customize attr

Question

My coding wordpress loop menu. Is possible replace JQ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- 1st Loop -->
<li class="dropdown">
    <a data-toggle='dropdown' class='dropdown-toggle'  href='javascript:void(0);' >First Pages</a>
    <!-- Should be
    <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-firstpage">First Page</a>
    -->
    <ul class="dropdown-menu">
    <!-- Should be
    <ul id="collapse-firstpage" class="collapse">
    -->
        <li><a href="new-page-1">New Page 1</a></li>
        <li><a href="new-page-2">New Page 2</a></li>
    </ul>
</li>
<!-- End 1st Loop -->

on href record the title (First Page to firstpage), insert [#collapse-] before and on ul id same like href but without [#].

Answer 1

Use each loop

jQuery(document).ready(function($){
$('.dropdown').each(function(){
var  $val = $(this).children('a').html();
var $page_name = $val.toLowerCase().replace(/[^a-z0-9\s]/gi, '').split(' ').join('');
$(this).children('a').replaceWith(' <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-'+$page_name+'">'+$val+'</a>');
$('.collapse', this).attr('id','collapse-'+$page_name);
})
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- 1st Loop -->
<li class="dropdown">
    <a data-toggle='dropdown' class='dropdown-toggle'  href='javascript:void(0);' >First Pages</a>
    <!-- Should be
    <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-firstpage">First Page</a>
    -->
    <ul class="collapse">
    <!-- Should be
    <ul id="collapse-firstpage" class="collapse">
    -->
        <li><a href="new-page-1">New Page 1</a></li>
        <li><a href="new-page-2">New Page 2</a></li>
    </ul>
</li>
<!-- End 1st Loop -->

jQuery

  jQuery(document).ready(function($){
$('.dropdown').each(function(){
var  $val = $(this).children('a').html();
var $page_name = $val.toLowerCase().replace(/[^a-z0-9\s]/gi, '').split(' ').join('');
$(this).children('a').replaceWith(' <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-'+$page_name+'">'+$val+'</a>');
$('.collapse', this).attr('id','collapse-'+$page_name);
})
 });