Question

当我点击一个按钮时，我试图重新排列我的列表，其中第一个移动最后一个，第二个移动第四个，第三个移动第三个，第五个移动第一个，它似乎没有任何效果，甚至控制台也没有显示任何内容。

＆＃13;

$(document).ready(function() {
  $("#rearranage").click(function() {

    $.fn.orderChildren = function(order) {
      this.each(function() {
        var el = $(this);
        for (var i = order.length; i >= 0; i--) {
          el.prepend(el.children(order[i]));
        }
      });
      return this;
    };



    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "first"
    ]);

  });

});

＆＃13;

<div class="hyperlinks">
  <ol class="lists">
    <li><a id="first" href="http://www.google.com">this</a></li>
    <li><a id="second" href="http://www.google.com">is</a></li>
    <li><a id="third" href="http://www.google.com">a</a></li>
    <li><a id="fourth" href="http://www.google.com">test</a></li>
    <li><a id="fifth" href="http://www.google.com">!</a></li>
</div>
</ol>
<button class="button" id="rearrange">rearrange this!</button>

＆＃13;

Answer 1

我为你做了一个小提琴：https://jsfiddle.net/6qoq3zrv/

HTML：

<div class="hyperlinks">
  <ol class="lists">
    <li class="block-item"><a id="first" href="http://www.google.com">this</a></li>
    <li class="block-item"><a id="second" href="http://www.google.com">is</a></li>
    <li class="block-item"><a id="third" href="http://www.google.com">a</a></li>
    <li class="block-item"><a id="fourth" href="http://www.google.com">test</a></li>
    <li class="block-item"><a id="fifth" href="http://www.google.com">!</a></li>
  </ol>
</div>
<input type="submit" id="rearrange">

JS：

$(document).ready(function(){
 $("#rearrange").click(function(){  
   $($(".block-item").get().reverse()).each(function() {
     $(this).appendTo($(this).parent());
   });
  });
});

单击rearrange按钮后，您的超链接现在将被撤消。

Answer 2

需要将子ID设置为li元素而不是锚点。那个以及其他一些错字修复可以让您的代码正常工作。

＆＃13;

 $("#rearrange").click(function() {

    $.fn.orderChildren = function(order) {
      this.each(function() {
        var el = $(this);
        for (var i = order.length; i >= 0; i--) {
          el.prepend(el.children(order[i]));
        }
      });
      return this;
    };



    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "#first"
    ]);

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hyperlinks">
  <ol class="lists">
    <li id="first"><a href="http://www.google.com">this</a></li>
    <li id="second"><a href="http://www.google.com">is</a></li>
    <li id="third"><a href="http://www.google.com">a</a></li>
    <li id="fourth"><a href="http://www.google.com">test</a></li>
    <li id="fifth"><a href="http://www.google.com">!</a></li>
  </ol>
</div>
<button class="button" id="rearrange">rearrange this!</button>

＆＃13;

Answer 3

有一些小错字：

$("#rearranage").click(function() { =＆gt;额外a
"first" =＆gt;缺少#
</div>位于ol。

然后，不需要每个循环。
需要for循环。

现在你必须将正确的元素定位到前置，这是主要的父级（li）。

＆＃13;

$(document).ready(function() {
  $("#rearrange").click(function() {

    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "#first"
    ]);
  });

  $.fn.orderChildren = function(order) {

    var el = $(this);
    for(i=order.length;i>=0;i--){
      el.prepend( $(order[i]).parent() );   // Target the anchor's parent element.
    }
  };

}); // ready

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hyperlinks">
  <ol class="lists">
    <li><a id="first" href="http://www.google.com">this</a></li>
    <li><a id="second" href="http://www.google.com">is</a></li>
    <li><a id="third" href="http://www.google.com">a</a></li>
    <li><a id="fourth" href="http://www.google.com">test</a></li>
    <li><a id="fifth" href="http://www.google.com">!</a></li>
  </ol>
</div>

<button class="button" id="rearrange">Rearrange this!</button>

＆＃13;

jQuery在<ol>中重新排列<li>？

3 个答案: