2

如何使用 jQuery 从“#current”中查找下一个和上一个“A”元素。HTML：

<ul>
    <li>
        <a></a>
        <a></a>
        <a></a>
    </li>
    <li>
        <a></a>
        <a></a>
        <a id='current'></a>
    </li>
    <li>
        <a></a>
        <a></a>
        <a></a>
    </li>
</ul>

我试图用这样的东西创建一个代码：

var curr = $('#current');
var prev = curr.parent().prev('a');
var next = curr.parent().next('a');

但它没有用。我认为这是一个非常简单的问题，但我现在被卡住了。有任何想法吗？

UPD：如果它是当前“LI”中的最后一个“A”元素，它应该移动到下一个“LI”元素以找到“A”。

4

3 回答 3

5

您不需要使用 parent 来获取 prev 和 next

现场演示

var curr = $('#current');
var prev = curr.prev('a');
var next = curr.next('a');

要制作此交叉行，您需要检查当前元素是否位于行的第一个或最后一个。如果当前元素是第一个元素，那么最后一个元素将是前一行的最后一个元素，类似地，如果当前元素是行的最后一个元素，那么下一个元素将是下一行的第一个元素。

现场演示

$('a').click(function () {
    $('ul > li > a').css('background-color', 'white');
    var curr = $(this);
    curr.css('background-color', 'green');;
    var prev = curr.prev('a')
    if(prev.length == 0 )
    {
        lastaOfPrevLi = curr.parent().prev();
        if( lastaOfPrevLi.length != 0)
            lastaOfPrevLi.find('a:last').css('background-color', 'red');
    }
    else
        prev.css('background-color', 'red');
    var next = curr.next('a');
    if(next.length == 0 )
    {
        lastaOfNextLi = curr.parent().next();
        if( lastaOfNextLi.length != 0)
            lastaOfNextLi.find('a:first').css('background-color', 'orange');
    }
    else
            next.css('background-color', 'orange');
});
于 2013-01-19T15:40:02.593 回答
1

如果您想超越LIof#current将需要一种不同的方法，因为nex()并且prev()只寻找直系兄弟姐妹

var curr = $('#current');
/* check if there is previous sibling, otherwise get last "a" in previous "LI"*/
var prev = curr.prev().length ? curr.prev() : curr.parent().prev().find('a:last');
var next = curr.next().length ? curr.next() : curr.parent().prev().find('a:first');
于 2013-01-19T16:00:27.277 回答
0

从 jQuery 文档和我自己的快速实验来看，它看起来不像 next或previous将获取父级之外的元素。除非使用选择器，否则这些方法应该获取当前元素的直接兄弟元素，而不考虑类型。不同父级下的元素不会被视为兄弟姐妹，它们更像是堂兄弟。

你可以做些什么来实现你的目标看起来更像是下面的

var current = $("#current");
var prev = current.prev();
var next = current.next().length > 0 ? current.next() : current.parent().next().first()

您可以prev使用 usingprev().last()而不是next().first()应该current是其父元素的第一个子元素来做同样的事情。

你可以在这个jsfiddle中尝试一下。

于 2013-01-19T16:06:18.263 回答