1

私は小さなライトボックス プラグインを作成しています (楽しみのためだけに)。ユーザーがキーを押すと、同じ「rel」属性を持つ次のリンクが開く (クリックをシミュレートする) 必要があります。

 .nextAll('.box[rel="'+boxed+'"]').eq(0).click();

上記のコードは、次の例で機能します。

<a href="/1.jpg" class="box" rel="box-abc123">One</a>
<a href="/2.jpg" class="box" rel="box-abc123">Two</a>
<a href="/3.jpg" class="box" rel="box-abc123">Three</a>

しかし、画像が別の親要素にある場合は…</p> 

<header><a href="/1.jpg" class="box" rel="box-abc123">One</a></header>
<section><a href="/2.jpg" class="box" rel="box-abc123">Two</a></section>
<footer><a href="/3.jpg" class="box" rel="box-abc123">Three</a></footer>

…うまくいきません。もちろん、parent() を使用してジャンプすることもできますが、親要素から完全に独立して構築したいと考えています (常に存在するとは限らないため)。親要素とは無関係に次の要素を見つける方法はありますか? これを解決する方法を知っている人はいますか？ありがとうございました！

4

2 に答える 2

1

親要素を使用したくない場合は、slice次のすべての要素を取得するために使用します

$('a.box[rel="'+boxed+'"]').slice($('a.box[rel="'+boxed+'"]').index(this))

作業フィドル: http://jsfiddle.net/aaWHt/2/

于 2012-10-16T08:53:23.583 に答える
0

これと同様の問題がありました-基本的に、DOMツリーのどこに表示されるかに関係なく、セット内の次の要素を取得しようとしました。最善の解決策は、最初にこれらの要素をループしてid、次の要素を選択するために使用できる を与えることでした。

$boxSelector = $('.box[rel="box-abc123"]');

$boxSelector.each(function(i, v) {
  $(this).prop('id', 'box-' + ++i);
});

次に、次のようなことを行うことidで、次の を取得できます。.box

var nextId = '';
var boxLength = $boxSelector.length;

$boxSelector.on('click', function() {
  var thisIndex = parseInt(this.id.replace(/[^\d]+/, ''));
  nextId = (thisIndex == boxLength) ? 1 : thisIndex+1;
});

次に、次を使用して次の要素を選択できます。

$('#box-' + nextId);

これがあなたの質問に直接答えるものではないことは理解していますが、同じ原則を適用して目的の結果を達成できるはずです。

于 2012-10-16T09:22:44.677 に答える