jQuery onclick ändern html der nächsten div nur

Question

Ich muss mehrere Instanzen des gleichen Codeausschnitts auf der gleichen Seite verwenden. Dies ist eine kleine Bildergalerie, die das Bild, das in einem Div angezeigt wird, basierend auf dem angeklickten Link ändert. Ich habe alles richtig funktioniert, aber wenn Sie auf das Bild klicken, um es in das Div einzufügen, ändert es jedes Div auf der Seite mit dieser Klasse. Ich versuchte mit $ (this) .closest, aber das scheint überhaupt nicht zu funktionieren. Bin ich in der Nähe?

<div class="gallery-carousel"> 
    <div class="galleryImageChange"> 
    </div> 
</div> 
<div class="icon-pager"> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
</div> 

<div class="gallery-carousel"> 
    <div class="galleryImageChange"> 
    </div> 
</div> 
<div class="icon-pager"> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
</div> 

$('a.imageNav').click(function() { 
    var $content = $(this).html(); 
    $(this).closest('div.galleryImageChange').html($content); 
    return false; 
}); 

Leider muss ich mehrere Instanzen davon verwenden, und ich kann nicht einzelne IDs für jede verwenden. Hier ist ein jsfiddle.

Answer 1

.closest für übergeordnetes Element der current-element aussehen wird, wie angegeben Selektor keinen Elternteil der element ist, wird nichts ausgewählt werden. Selektor

Verwendung als $(this).closest('.icon-pager').prev('div.gallery-carousel').find('div.galleryImageChange')

$('a.imageNav').click(function() { 
 
    var $content = $(this).html(); 
 
    $(this).closest('.icon-pager').prev('div.gallery-carousel').find('div.galleryImageChange').html($content); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="gallery-carousel"> 
 
    <div class="galleryImageChange"> 
 
    </div> 
 
</div> 
 
<div class="icon-pager"> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
</div> 
 

 
<div class="gallery-carousel"> 
 
    <div class="galleryImageChange"> 
 
    </div> 
 
</div> 
 
<div class="icon-pager"> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
    <a href="#" class="imageNav"> 
 
    <img src="/img/logo.png"> 
 
    </a> 
 
</div>

Answer 2

Ändern Sie Ihre HTML-ähnliche

<div class="galleryContainer"> 
    <div class="gallery-carousel"> 
    <div class="galleryImageChange"> 
    </div> 
    </div> 
    <div class="icon-pager"> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    </div> 
</div> 
<div class="galleryContainer"> 
    <div class="gallery-carousel"> 
    <div class="galleryImageChange"> 
    </div> 
    </div> 
    <div class="icon-pager"> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    <a href="#" class="imageNav"><img src="/img/logo.png"></a> 
    </div> 
</div> 
$('a.imageNav').click(function() { 
    var $content = $(this).html(); 
    $(this).closest(".galleryContainer").find('div.galleryImageChange').html($content); 
    return false; 
});