1

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 [#].

4

1 回答 1

0

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);
})
 });
于 2017-04-15T05:35:21.537 回答