mootools clone(） inject('top'） 颠倒了元素顺序

mootools clone() inject('top') reverses the element order order

本文关键字：元素 顺序 top mootools clone inject      更新时间：2023-09-26

Using clone（rue， false）.inject（'myList'， 'top'） 当 'top' 是 where 字符串时，反转项目顺序。一定有一种优雅的排序方式吧？我的方法错了吗？

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

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

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 调用。

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

例如

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
相关文章：