JQuery - определение родительского индекса по дочерним - PullRequest
Новая
       12

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

1 голос
/ 27 апреля 2011

Доброе утро.Я пью еще немного кофе, чтобы компенсировать стресс с помощью этой проблемы 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>

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

Pseudo 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 </p>

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

Вопрос:

Как "подняться" по родителям class = "nextImage" на элемент divclass = "imageGallery" и ответный индекс div класса "imageGallery" ?

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

Ответы [ 3 ]

3 голосов
/ 27 апреля 2011

Что-то вроде 

$(".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 s.Начинается с нуля, поэтому вам может потребоваться +1 для удобства чтения.

1 голос
/ 27 апреля 2011

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

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

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

0 голосов
/ 27 апреля 2011 
var activeGallery = $(this).closest(".content").index();

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

...