Question

当'top'是where字符串时，使用clone（rue，false）.inject（'myList'，'top'）会反转项目顺序。必须有一种优雅的方式对此进行排序？我的做法错了吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/moo.1.4.5/core.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function () {


            $('myList').getChildren().each( function (el, i)  { 
                el.clone(true, false).addClass('clone').inject('myList', 'top');
                el.clone(true, false).addClass('clone').inject('myList', 'bottom');
            }) ;


        });
    </script>
</head>
<body>
    <ul id="myList">
        <li><p>Slide 1</p></li>
        <li><p>Slide 2</p></li>
        <li><p>Slide 3</p></li>
        <li><p>Slide 4</p></li>
        <li><p>Slide 5</p></li>
    </ul>
</body>
</html>

返回

<ul id="myList">
   <li class="clone"><p>Slide 3</p></li>
    <li class="clone"><p>Slide 2</p></li>
    <li class="clone"><p>Slide 1</p></li>
    <li><p>Slide 1</p></li>
    <li><p>Slide 2</p></li>
    <li><p>Slide 3</p></li>
    <li class="clone"><p>Slide 1</p></li>
    <li class="clone"><p>Slide 2</p></li>
    <li class="clone"><p>Slide 3</p></li>
</ul>

Answer 1

看看你在做什么...... inject('top')。列表的顶部始终是相同的位置 - 列表的顶部。

e.g

1 2 3         <--original
1 1 2 3       <--clone 1 + insert top
2 1 1 2 3     <--clone 2 + insert top
3 2 1 1 2 3   <--clone 3 + insert top

你必须从你要克隆的块的末尾开始，然后向前推进：

1 2 3         <--original
3 1 2 3       <--clone 3 + insert top
2 3 1 2 3     <--clone 2 + insert top
1 2 3 1 2 3   <--clone 1 + insert top

Answer 2

取决于您的目标。如果您的目标是克隆列表并将其注入顶部，您可以按照当前的思路进行：

http://jsfiddle.net/dimitar/xNWrM/

var list = $('myList'),
    lis = list.getElements('li');

lis.reverse().each(function(el){
    el.clone(true, true).addClass('clone').inject(list, 'top');
});

通过在循环它们之前注入先前注入的元素，可能有更优雅的方法来克隆它们，这将保存Elements.reverse调用。

mootools clone（）inject（'top'）反转元素顺序

2 个答案: