问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ul标签内容转入到dl当中?

头像
御宅男小春子
    23614878
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <dl id="dl"></dl>

    <ul id="ul">
        <li data-id="1"><a href="">测试1</a></li>
        <li data-id="2"><a href="">测试2</a></li>
        <li data-id="3"><a href="">测试3</a></li>
        <li data-id="4"><a href="">测试4</a></li>
    </ul>

    <button id="btn">转换</button>
    <script type="text/javascript">
        $(document).on('click', '#btn', function (e) {
            $('#dl').append($('#ul').find('li'))
        })
    </script>

</body>
</html>

    现在实现的效果是ul里面的内容转入到dl当前，但是我想同时将li标签变成dd
    类似

        <dl id="dl">
        <dd data-id="1"><a href="">测试1</a></dd>
        <dd data-id="2"><a href="">测试2</a></dd>
        <dd data-id="3"><a href="">测试3</a></dd>
        <dd data-id="4"><a href="">测试4</a></dd>
    </dl>
    append前端jquery
    阅读 2.8k
    1 个回答
    得票最新
    头像
    乔治
      12.4k1329
      ✓ 已被采纳
      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <dl id="dl"></dl>

    <ul id="ul">
        <li data-id="1" data-url="xx"><a href="">测试1</a></li>
        <li data-id="2" data-url="yy"><a href="">测试2</a></li>
        <li data-id="3" data-url="zz"><a href="">测试3</a></li>
        <li data-id="4" data-url="aa"><a href="">测试4</a></li>
    </ul>

    <button id="btn">转换</button>
    <script type="text/javascript">
        $(document).on('click', '#btn', function (e) {
            $('#ul').find('li').each(function(){
                var newDD = $('<dd></dd>').html($(this).html());
                var dataId = $(this).data('id');
                var dataUrl = $(this).data('url');
                newDD.attr('data-id', dataId);
                newDD.attr('data-url', dataUrl);
                $('#dl').append(newDD);
            });
            $('#ul').remove();
        })
    </script>

</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏