jQueryでコードで指定された要素から、指定されたクラスの次の要素を選択します。

Question

私は今、多くのオプションを試しました！

ASPで作成されたサムネイルを含む一連の要素があり、AJAXの読み込みによってページに動的にレンダリングされます。これらのアイコンの中には、クリックすると画像が拡大されるアイコンがあります。

繰り返しHTMLは次のようになります。だから、

<div class="prodImgContainer"> 
     <img src="*url*" id="*id*" class="itemImages" /> 
     <div class="imgControl"> 
      <span class="tinyIcons tinyDelete imgDelete" id="delete*id*"></span> 
      <br /> 
      <span class="tinyIcons tinyZoom imgZoom" id="zoom*id*"></span> 
     </div> 
    </div> 

、クラスimgZoomと、あなたは何もそれは拡大を発射するとき。これは私がモーダルウィンドウを読み込むための標準関数によって行われます。

$('.imgZoom').live('click', function() { 
     var prodId = $('#productId').val(); 
     var thisImage = ($(this).attr('id').replace('zoom', '')).replace('-tb', ''); 
     var img = $("<img />").addClass('nextImg').attr('id', 'thisImg' + thisImage).attr('src', '*BASE URL *' + prodId + '/' + thisImage + '.jpg').load(function() { 
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
       alert('broken image!'); 
      } else { 
       $("#largeImgContainer").empty(); 
       $('#showImg').click(); 
       $("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow'); 
      }; 
     }); 
    }); 

上記のコードは、拡大されたイメージを既存のコンテナに読み込みます。

今、... clickイベントを次のimgZoom要素でトリガーできるように、作成された画像をクリックします。

呼び出し元の要素はしかし、コードされなくなったので、私はこのようにそれを行うにしようとしています：

ここ

$('.nextImg').live('click', function() { 
     var nextImage = ($(this).attr('id').replace('thisImg', '')).replace('-tb', ''); 
     $('#zoom' + nextImage + '-tb').next('.nextImg').click(); 
    }); 

、私はもともと開くようにクリックされた要素のIDを決定することができていませんこの画像

まで私が何をしないのです...私は、クラスnextImgで、次のいずれかを見つけ、それに

をクリックし、その要素を見つけるために、$('#zoom' + nextImage + '-tb').next('.nextImg').click();を期待しています。しかし、それは仕事をdoesntの？

Answer 1

next()だけで、あなたが

//this gets the DOM element 
    var nextImg = $('#zoom' + nextImage + '-tb').nextAll('.nextImg')[0]; 
    //wrap this in jQuery and click it 
    $(nextImg).click(); 

が表すjQueryオブジェクトを考えるとドキュメント

から撮影を行うことができDOM（それの後にすぐにあるelemement）の次の要素を返します。 DOMエレメントのセットである .next（）メソッドを使用すると、DOMツリー内のこれらのエレメントの兄弟である の直後を検索し、一致するエレメントから新しいjQuery オブジェクトを構築することができます。

このメソッドは、オプションで、$（）関数に渡すことができる同じタイプのセレクタ式を受け入れます（ ）。直後の の兄弟がセレクタと一致する場合、新しく構築された jQueryオブジェクトに残ります。それ以外の場合は除外されます。あなたは次のimgZoom要素のクリックをトリガするために動的に作成画像要素にクリックを添付することができるはず

Answer 2

、すなわちのようなもの：私は同じミスを犯しました

... 
$("#largeImgContainer").empty(); 
$('#showImg').click(); 
$("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow'); 

// here 'this' refers to the imgZoom element that was clicked 
var nextElement = $(this).next('.imgZoom'); 
img.click(function() { 
    nextElement.click(); // trigger the click 
}); 
... 

Answer 3

私自身、 .next（）はそのようには動作しません。それは、DOM の現在の要素の直後の要素を返します。がセレクタと一致する場合のみ返します。それ以外の場合は要素を返しません。あなたが特定のセレクタにマッチするDOMで現在選択されている要素の後にくる最初の要素をしたい場合は

は、あなたはこのようなものを使用することができます

$('#zoom' + nextImage + '-tb').nextAll('.nextImg:first').click(); 

Answer 4

それはあなたが、そこにある欲しいものを理解するのは難しいですあなたの言葉とあなたのコードとの違い。たぶん、代わりにこのライン

$('#zoom' + nextImage + '-tb').next('.nextImg').click(); 

これは動作します：

$('#zoom' + nextImage + '-tb').parents('.prodImgContainer').next('.prodImgContainer').find('.imgZoom').click(); 

は、私は理解していなかったもの：の使用方法「を-tb」 - どこそれはIDの一部と場所ではありません？なぜあなたは.next（ '。nextImg'）を呼び出しましたか？次のimgZoom要素をクリックしたいと思っていました。あなたのコードでは、largeImgContainer内の（単一の）画像だけがnextImgクラスを持っています。

Answer 5

Argh !!

上記のいずれも機能しませんでしたが、助けてくれてありがとうございます。

画像の配列を作成して位置を通過させたので、次の画像をクリックすると配列の次の位置にファイルが開きます。