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」要素である場合、「A」を見つけるために次の「LI」要素に移動する必要があります。

4

3 に答える 3

5

前と次を取得するために親を使用する必要はありません

ライブデモ

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

LIの先を見たい場合は#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 docs と私自身の簡単な実験から、親の外側の要素のように見えない 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

このjsfiddleで試すことができます。

于 2013-01-19T16:06:18.263 に答える