在DIV中操作第一個孩子作爲jQuery中的UL元素

目前我有以下HTML元素。在DIV中操作第一個孩子作爲jQuery中的UL元素

<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（DIV裏面ID爲「阿凡達控制檯」），並在末尾插入新的L1標籤，如下圖所示。

以下是需要的輸出。

<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/

來源

2014-01-10 Purus

您的問題中的代碼似乎不匹配您的小提琴中的代碼。 – j08691

爲了使它整潔，我已經將一些不必要的css屬性和這裏的url鏈接起來。 – Purus

這應該工作：

http://jsfiddle.net/da4dz/

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

來源

2014-01-10 18:33:16

謝謝。它效果很好。 – Purus

您可以使用jQuery的包裝（）方法：

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

來源

2014-01-10 18:31:34 Bic

在DIV中操作第一個孩子作爲jQuery中的UL元素

回答

相關問題