jquery 自定义，自定义属性

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

jquery 自定义，自定义属性

jquery custom, customize attr

jquery

unwrap