Question

我有一个包含4个列表项的ul列表。列表项的ID为＃one，＃two，＃three和#four：

  <ul class="home_slider">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
  </ul>

还有另一个ul列表，其中包含4个相应的列表项：

  <ul class="btn_wrap">
    <li class="btn" id="btn-01"></li>
    <li class="btn" id="btn-02"></li>
    <li class="btn" id="btn-03"></li>
    <li class="btn" id="btn-04"></li>
  </ul>

第二个ul列表中的四个列表项用作使用jQuery click的按钮。

按钮对应于第一个ul列表的项目，例如＃btn-01操纵#one。

问题

我想在点击＃btn-01时这样做，它会让#one成为其父级的第一个孩子＆＃34; home_slider＆＃34;。

相同的逻辑适用于其他按钮所以当你点击＃btn-02时，它会使#two成为＆＃34; home_slider＆＃34;的第一个孩子。

这是一个带有注释的JS小提琴我想象代码需要去：

JS Fiddle

小提琴中有更多的内容，比如在点击时添加课程，但为了简单起见，我把它排除在外，因为它并不真正与问题有关。

Answer 1

由于您使用的是jQuery，因此可以使用remove()和prependTo()。

例如，这会移除#four并将其添加到.home_slider的开头：

$('#four').remove().prependTo('.home_slider');

当然，要在所有四个处理程序中执行此操作。

更新：更新的fiddle

Answer 2

使用here in your updated fiddle

等prepend方法

$('#id').parent().prepend($('#id'))

Answer 3

有一些事情可以帮助你，我altered your fiddle如图所示：

<强> HTML

<ul class="home_slider">
  <li data-id="btn-01" id="one">one</li>
  <li data-id="btn-02" id="two">two</li>
  <li data-id="btn-03" id="three">three</li>
  <li data-id="btn-04" id="four">four</li>
</ul>

<ul class="btn_wrap">
  <li class="btn" id="btn-01"></li>
  <li class="btn" id="btn-02"></li>
  <li class="btn" id="btn-03"></li>
  <li class="btn" id="btn-04"></li>
</ul>

<强> JS

jQuery('.btn').click(function() {
  var target = '[data-id="' + $(this).attr('id') + '"]';
  $('.btn').removeClass('btn-selected');
  $(this).addClass('btn-selected');

  $(target).prependTo('.home_slider');

  $('.home_slider > li').removeClass('active');
  $(target).addClass('active');
});

单击后，将元素作为其父元素列表的第一个子元素

3 个答案: