jQuery: obtenir une référence à un élément spécifique sans utiliser id

Question

Je suis bricoler un peu avec jquery pour afficher un div caché quand un lien est cliqué. Cela devrait être assez simple, mais il y a une faille à dans ce cas. Je le balisage suivant:

<div class="first-row">
        <div class="week">
            <p>Uge 2</p>
            <p>(08-01-11)</p>
        </div>
        <div class="destination">
            <p><a href="#">Les Menuires</a></p>
            <p>(Frankrig)</p>
        </div>
        <div class="days">4</div>
        <div class="transport">Bil</div>
        <div class="lift-card">3 dage</div>
        <div class="accommodation">
            <p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
            <p>4-pers. værelse m. bad/toilet</p>
        </div>
        <div class="order">
            <p><a href="#">2149,-</a></p>
            <p class="old-price">2249,-</p>
        </div>
        <div class="hotel-info">
         <!-- The div I want to display on click -->
        </div>
    </div>

Quand je clique sur le lien « show-info » Je veux que le div « hôtel-info » pour afficher. Mon arrière-plan devs ne veulent pas que je l'utilise (ids ne me demandez pas pourquoi ..) et le balisage ci-dessus est utilisé maintes et maintes fois à des données d'affichage. Par conséquent, je dois pouvoir accéder au div « hôtel-info » div dans la « première ligne » où le lien est cliqué.

J'ai essayé de faire quelque chose comme:

$(document).ready(function() {
    $('.show-info').click(function() {
        var parentElement = $(this).parent().parent();
        var lastElementOfParent = parentElement.find(".show-hotel");
        lastElementOfParent.show();
    });
});

Mais sans résultat: -? / Est-ce possible à tous

Toute aide est grandement appréciée!

Merci beaucoup à l'avance!

Answer 1

Essayez ceci:

$('.show-info').click(function() {
    $(this).closest('.accommodation').siblings('.hotel-info').show();
});

Encore mieux imo, car il serait indépendant de où le lien est dans une rangée, si chaque « ligne div » a la même classe (je suppose que le premier a la classe first-row), vous pouvez faire:

$(this).closest('.row-class').find('.hotel-info').show();

Référence: .closest , .siblings

---

Explication pourquoi votre code ne fonctionne pas:

$(this).parent().parent();

vous donne la div avec classe .accommodation et celui-ci n'a pas de descendant avec classe .hotel-info.

Il est pas une bonne idée d'utiliser ce genre de Traversal pour plus d'un niveau de toute façon. Si la structure est un peu changé, votre code cassera. Essayez toujours d'utiliser des méthodes qui ne cassera pas sur les changements de structure.

Answer 2

Vous avez raison de ne pas utiliser un élément d'identité pour trouver la DIV que vous voulez:)

Utilisez closest et nextAll

Démo en direct ici: http://jsfiddle.net/jomanlk/xTWzn/

$('.show-info').click(function(){
    $(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});