Question

目前我有以下HTML元素。

<div class="ow_box_empty ow_stdmargin clearfix">
    <div id="avatar-console" class="ow_avatar_console ow_center">
        <div style="height: 190px; background: url(7.jpg) no-repeat;>
            <div style="display: none;" id="avatar-change">
                <a href="http://avatar">Change Avatar</a>
            </div>
        </div>
        <div class="user_online_wrap">
            <div class="ow_miniic_live"><span class="ow_live_on"></span></div>
        </div>
    </div>
</div>

我想用LI标签包装第一个DIV（ID为“avatar-console”的DIV内部），并在末尾插入新的LI标签，如下所示。

以下是所需的输出。

<div class="ow_box_empty ow_stdmargin clearfix">
    <div id="avatar-console" class="ow_avatar_console ow_center">
        <ul>
            <li>
                <div style="height: 190px; background: url(7.jpg) no-repeat">
                    <div style="display: none;" id="avatar-change">
                        <a href="http://avatar">Change Avatar</a>
                    </div>
                </div>
            </li>
            <li class="star">★</li>
        </ul>
        <div class="user_online_wrap">
            <div class="ow_miniic_live"><span class="ow_live_on"></span></div>
        </div>
    </div>
</div>

我尝试使用以下代码开始，但它会产生不需要的结果。我不知道从哪里开始，如何开始。

$("#avatar-console div:first-child").append('<li class="star">★</li>')

Fiddle Link: http://jsfiddle.net/Purus/U3KC8/

Answer 1

这应该有效：

http://jsfiddle.net/da4dz/

$("#avatar-console > div:first")
    .wrap('<ul><li></li></ul>')
    .closest('ul').append('<li class="star">star</li>');

Answer 2

您可以使用jQuery wrap（）方法：

$("div:first-child", "#avatar-console").wrap("<ul><li></li></ul>");

在DIV中操作第一个子节点作为jQuery中的UL元素

2 个答案: