Question

如何使用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”。

Answer 1

您不需要使用父级来获得上一个和下一个

<强> Live Demo

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

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

<强> Live Demo

$('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');
});

Answer 2

如果您希望超越LI的{{1}}，则需要采用不同的方法，因为#current和nex()仅查找中间兄弟姐妹

prev()

Answer 3

从jQuery文档和我自己的快速实验中，它看起来不像next或previous将获得父元素之外的元素。除非使用选择器，否则这些方法应该无论类型如何都能获得当前元素的直接同胞。不同父母的元素不会被视为兄弟姐妹，他们更像表兄弟。

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

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

您可以使用prev使用prev().last()而不是next().first() current使用{{1}}作为其父元素的第一个孩子。

您可以在此jsfiddle中试用。

DOM jQuery查找当前的下一个和上一个元素

3 个答案: