jquery自定义，自定义attr

Question

我的编码 wordpress 循环菜单。可以代替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 -->

在href上记录标题（首页到首页），在ul id之前和上插入[#collapse-]，与href相同，但没有[#]。

Answer 1

使用每个循环

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);
})
 });