javascript - リストの最初の要素を抽出し、それを使用してjqueryのリストを置き換える方法は?

Question

元の HTML コードは次のようになります。

<div>
<ul class="alt">
   <li> <a class="button1"> Button1 </a></li>
   <li> <a class="button2"> Button2 </a></li>
</ul>
</div>

そして、これを次のように変更したいと思います。

<div>
  <a class="button1"> Button1 </a>
</div>

jqueryでこれを実装する方法を知っている人はいますか?

Answer 1

.first()またはのいずれかで最初の要素を取得できます:first Selector

$('div').html($('div li:first').html())

または試す

$("div").html($('li').first().html());

ジャスフィドル

Answer 2

このようにできます。

ライブデモ

$('.alt').closest('div').html($('.alt li:first').html());

Its better to assign some id to div you are intending to make it unique、変更がこの div に限定されるようにします。

HTML

<div id="div1">
<ul class="alt">
   <li> <a class="button1"> Button1 </a></li>
   <li> <a class="button2"> Button2 </a></li>
</ul>
</div>

Javascript

$('#div1').html($('#div1 li:first').html());

Answer 3

またはこれ:)

$('.alt').replaceWith( $('.alt>li:eq(0)').contents() );

または単に楽しみのために：

$('.alt>li:eq(0)').unwrap().siblings().remove().end().contents().unwrap();