Question

我正在使用包含3个项目的导航栏。单击某个项目时，项目顺序应重新排列，以便单击的项目位于中心（水平导航栏）。这是迄今为止的代码：

$('li').mousedown(function(e){
    $('li').addClass('flanking');
    $(this).removeClass('flanking');

    $('ul li:eq(0)').after($(this));

    if( $(this) == '(ul li:eq(0)' ){
        $('ul li:eq(2)').prependTo('ul');
    };
});

这适用于重新排列三个中的第二个和最后一个位置列表项，但如果单击第一个则不行。我已经尝试将if语句（用于捕获列表中的第一项是否被点击）更改为以下

if( $(this) == $('ul li:eq(0)') ){
    $('ul li:eq(2)').prependTo('ul');
};

哪个也不起作用。如何检查点击的'li'是否是'ul'中的第一个，然后将其移到中间？谢谢你的阅读。

编辑：请参阅JaakKütt关于可扩展解决方案和工作演示的答案，Gokhan Arik使用eq和if语句的正确语法，而Birrel用于一些非常棒的动画。

Answer 1

编辑：提出了一个更通用的解决方案，它不关心列表中有多少元素，并且在推送时将点击的元素放在中间（或者如果有偶数个元素，则最接近中心）它来自的方向（上下）之间的元素之间的元素。

This jsFiddle example包含4个不同长度的列表（在<li>和<p>兄弟示例中）和更少的换行符。

$('li').mousedown(function (e) {
    var self = $(this),
        length = self.siblings().length + 1,
        middle = length / 2 - 1,
        list = self.parent().children(),
        i = self.index() - 1;
    if (length % 2) {
        $()[i < middle ? 'after' : 'before'].call(
            list.eq(Math.round(middle)), 
            self
        );
    } else {
        list.eq(
            Math[i < middle ? 'ceil' : 'floor'].call(null, middle)
        ).after(self);
    }
});

PS1：从示例中移除了“侧翼”级别的业务OP，因为它与其余的功能性无关。

PS2：任何微调代数的努力都会得到我的谢意：D

Answer 2

将您的if声明更改为此

if( $(this)[0] == $('ul li:eq(0)')[0] ){
        $('ul li:eq(2)').prependTo('ul');
};

比较事情时你犯了错误。 jQuery 选择器返回对象数组。

Answer 3

Here是一个有动画功能，现在可以在Chrome中正常使用。

<强> HTML：

<div class="wrapper">
    <ul>
        <li class="flank_left">1</li>
        <li class="middle">2</li>
        <li class="flank_right">3</li>
    </ul>
</div>

<强> CSS：

* {
    padding: 0px;
    margin: 0px;
}
.wrapper {
    width: 310px;
    position: relative;
    margin: 10px;
}
ul li {
    display: block;
    width: 100px;
    height: 25 px;
    background: #099;
    cursor: pointer;
    float: left;
}
.flank_left {
    position: absolute;
    top: 0px;
    left: 0px;
}
.flank_right {
    position: absolute;
    top: 0px;
    left: 210px;
}
.middle {
    position: absolute;
    top: 0px;
    left: 105px;

}

<强> JavaScript的：

$('li').click(function () {
    // If not middle element and if not animated...
    if (!$(this).hasClass('middle') && !$('.middle').is(':animated')) { 

        if($(this).hasClass("flank_left") ){ // If flank_left
            $( this ).switchClass( "flank_left", "middle", 1000);
            $( '.middle' ).switchClass( "middle", "flank_left", 1000);
        }else{ // if flank_right
            $( this ).switchClass( "flank_right", "middle", 1000);
            $( '.middle' ).switchClass( "middle", "flank_right", 1000);
        }
    }
});

注意：您需要 TWO 外部资源。您可以找到它们并下载它们here和here

Answer 4

我已经实现了使用动画重新安排列表项。要求是我有五个要素：

5   4   1   2  3

并重新排列顺序，当点击第一个元素时，它将位置放在中心，如下所示：

$('.horizontal li').on('click', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
    var tparent = $(this).parent();
    var childs = tparent.children().length;
    var eachWidth = this.clientWidth + 10;
    var middle = eachWidth * (parseInt(childs / 2));
    var rowChild = $(this).parent().children('li');
    var currentIndex = rowChild.index($(this));

    rowChild.each(function (li) {
        if ($(this).attr("POS")) {
            cp = $(this).attr("POS");
        } else {
            $(this).attr("POS", li);
        }
    });

    function animateEach() {
        rowChild.each(function (li) {
            var _minePos = $(this).position().left;
            var cp = $(this).attr("POS");
            var _newPos = cp * eachWidth;

            $(this).animate({
                left: (cp - li) * eachWidth,
            }, 40, function () {
                // checkPOS();
            });
        });
        setTimeout(checkPOS(true), 40);
    }

    var currentelement = $(this);
    var currentIIN = $(this).attr("POS");

    function checkPOS(ee) {
        if (currentIIN != 2) {
            rowChild.each(function (li) {
                var eachPOS = $(this).attr("POS");
                if (eachPOS >= 4) {
                    $(this).attr("POS", 0);
                } else {
                    $(this).attr("POS", parseInt(eachPOS) + 1);
                }
            });
            currentIIN = currentelement.attr("POS");
            animateEach();
        } else {
            if (ee) currentelement.addClass('active');

        }
    }

    checkPOS();

你可以检查我的小提琴：Jsfiddle

p {
    margin: 1px;
    cursor: pointer;
}
li {
    cursor: pointer;
}
ul.horizontal {
    clear: both;
    display: block;
    height: 40px;
}
ul.horizontal li {
    float: left;
    /*background: #ccc;*/
    display: block;
    margin-left: 10px;
    padding: 5px;
    position: relative;
}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}
/*background: #ccc;*/
 display: block;
 margin-left: 10px;
 padding: 5px;
 position: relative;

}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {
    margin: 0;
    font: normal 12px/18px'Helvetica', Arial, sans-serif;
    background: #44accf;
}
/* Positioning Rules */
 #container {
    width: 900px;
    margin: 0 auto;
}
#header {
    background: #b7d84b;
    height: 50px;
    text-align: center;
    color: #ddd;
    line-height: 50px;
}

h1 {
    font-size: 20px;
}

检查我的Jsfiddle

jQuery：使用eq重新排列列表项

4 个答案: