JQuery - определение родительского индекса из его дочерних элементов

Доброе утро. Я пью еще немного кофе, чтобы компенсировать стресс с этой проблемой Javascript/jQuery.

в основном это противоположно этому вопросу: Определение дочернего индекса в его родительском элементе

Фактический HTML (DOM)

<body>
<div id="content">
    <div class="contentbox">
        <div class="content">
            <h2>Image Gallery Header</h2>
            <div class="imageGallery">
                <div class="image">
                    <a href="javascript:void(0);" class="prevImg"><i class="sx028"></i></a>
                    <ul>
                        <li id="g2i1">
                            <img src="imgs/imageGallery1.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                        <li id="g2i2">
                            <img src="imgs/imageGallery2.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="nextImg" title="nächstes Bild"><i class="sx029"></i></a>
                </div>
                <div class="thumbs">
                    <a href="javascript:void(0);" class="prevImg">&nbsp;</a>
                    <ul>
                        <li>
                            <img src="imgs/imageGallery1.jpg" alt="" width="149" height="88" />
                        </li>
                        <li>
                            <img src="imgs/imageGallery2.jpg" alt="" width="149" height="88" />
                        </li>
                    </ul>            
                    <a href="javascript:void(0);" class="nextImg">&nbsp;</a>
                </div>
            </div>
            <h2>Image Gallery Caption</h2>
            <p>
                Some text.
            </p>
        </div>

        <div class="content">
            <h2>Image Gallery Header</h2>
            <div class="imageGallery">
                <div class="image">
                    <a href="javascript:void(0);" class="prevImg"><i class="sx028"></i></a>
                    <ul>
                        <li id="g2i1">
                            <img src="imgs/imageGallery4.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                        <li id="g2i2">
                            <img src="imgs/imageGallery5.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="nextImg"><i class="sx029"></i></a>
                </div>
                <div class="thumbs">
                    <a href="javascript:void(0);" class="prevImg">&nbsp;</a>
                    <ul>
                        <li>
                            <img src="imgs/imageGallery4.jpg" alt="" width="149" height="88" />
                        </li>
                        <li>
                            <img src="imgs/imageGallery5.jpg" alt="" width="149" height="88" />
                        </li>
                    </ul>            
                    <a href="javascript:void(0);" class="nextImg">&nbsp;</a>
                </div>
            </div>
            <h2>Image Gallery Caption</h2>
            <p>
                Some text.
            </p>
        </div>
    </div>
</div>
</body>

Спасибо, что прочитали эту большую кучу.

ПсевдоJQuery

$(".nextImg").click(function() { 
    var activeGallery = $(this).parents(".imageGallery").index();
    alert("You've clicked the next image button of image Gallery #" + activeGallery);
});

Результат (оповещение)

Вы нажали кнопку следующего изображения в галерее изображений #1 ‹-- если вы нажали кнопку ".nextImg" в ".imageGallery" с индексом(); из 1

Вы нажали кнопку следующего изображения в галерее изображений #2 ‹-- если вы нажали кнопку ".nextImg" в ".imageGallery" с индексом(); из 2

Вопрос:

Как мне "подняться" по родительским элементам class="nextImage" к элементу div class="imageGallery" и ответить на индекс класса div" Галерея изображений" ?

Это действительно важно для последнего шага моего проекта галереи. Спасибо за любой ответ!


jquery dom dom-traversal
person Tomkay    schedule 27.04.2011    source источник
comment
Я сделал это, но теперь у меня нет кода. Попробуйте использовать метод .next() из корневого узла. Я постараюсь опубликовать ответ позже .. вам нужно еще кое-что   -  person Piotr Kula    schedule 27.04.2011

Ответы (3)


arrow_upward
3
arrow_downward

Что-то типа

$(".nextImg").click(function() { 
    var $galleries=$('.imageGallery');
    var activeGallery = $galleries.index($(this).closest(".imageGallery"));
    alert("You've clicked the next image button of image Gallery #" + activeGallery);
});

activeGallery сообщит вам индексную позицию текущего .imageGallery (того, который включает ссылку, по которой щелкнули) среди всех .imageGallery. Это отсчитывается от нуля, поэтому вы можете захотеть +1 для удобочитаемости.

person kapa    schedule 27.04.2011

arrow_upward
1
arrow_downward

Это не то, что вы просили, но я думаю, что это именно то, что вам нужно:

$(".nextImg").click(function() { 
    var $activeGallery = $(this).closest(".imageGallery");
    // In here, you call methods on $activeGallery
});

http://api.jquery.com/closest/

person x10    schedule 27.04.2011

arrow_upward
0
arrow_downward 

var activeGallery = $(this).closest(".content").index();

Я думаю, может быть, это то, что вам нужно, вам нужно подняться на другой уровень, .content — это div, который индексируется в рамках всего документа, оттуда вы можете настроить его дочернюю галерею.

person clairesuzy    schedule 27.04.2011
comment
Если в .contentbox нет других элементов, кроме .contents. - person kapa; 27.04.2011