jQuery всеки метод

Аз съм начинаещ в javascript и имам известни проблеми с използването на метода „each“ на jQuery. Имам модул за галерия на сайт на Joomla, който функционира като обикновен плъзгач за изображения. Добавих някакъв код, за да разреша лайтбокс върху свързаните изображения. Това, което бих искал да направя сега, е да копирам надписа на миниатюрата (който модулът добавя в момента) към атрибута Title във връзката, така че да се показва в лайтбокса за всяко изображение.

Ето как е структуриран HTML...

<div class="camera_wrap" id="camera_wrap_106">
<div class="cameraContents">
    <div class="cameraContent">
        <a class="camera_link" href="/bglightbox-large.jpg" title="This is where i need the caption"></a>
        <div class="camera_caption">
            <div>This is the caption</div>
        </div>
    </div>
    <div class="cameraContent">
        <a class="camera_link" href="/bglightbox-large.jpg" title="This is where i need the caption"></a>
        <div class="camera_caption">
            <div>This is the caption</div>
        </div>
    </div>
    <div class="cameraContent">
        <a class="camera_link" href="/bglightbox-large.jpg" title="This is where i need the caption"></a>
        <div class="camera_caption">
            <div>This is the caption</div>
        </div>
    </div>
</div>

I've gotten the code this far, but it only copies the first caption div to each title attribute rather than executing it on each instance. Not sure if this is even the best start...

$("#camera_wrap_106 .cameraContent").each(function() {
    $("#camera_wrap_106 a.camera_link").attr('title', $("#camera_wrap_106 .camera_caption div").html());
});

Благодаря предварително!


loops jquery each
person user1060324    schedule 09.01.2013    source източник

Отговори (2)


arrow_upward
3
arrow_downward

Можете да използвате функцията за обратно извикване на attr()

$("#camera_wrap_106 .cameraContent a.camera_link").attr('title',function(){
    return $.trim($(this).next().text());
});

http://jsfiddle.net/nSj8h/

Или ако искате да използвате всеки израз, просто задайте контекста във вашите селектори

$("#camera_wrap_106 .cameraContent").each(function() {
    $("a.camera_link",this).attr('title', $(".camera_caption div",this).text());
});

Добавянето на контекста във вашия селектор е същото като използването на find

$('element',context) == $(context).find('element')

http://jsfiddle.net/baLmn/

person wirey00    schedule 09.01.2013

arrow_upward
2
arrow_downward

Трябва да използвате this:

$("#camera_wrap_106 .cameraContent").each(function() {
    $(this).attr('title', $(this).html());
});

.each предоставя елемента в итерацията като контекст на функцията (т.е. this).

Предоставя се и като втори аргумент (първият е индексът), което означава, че бихте могли да напишете и това:

$("#camera_wrap_106 .cameraContent").each(function(index, element) {
    $(element).attr('title', $(element).html());
});
person Denys Séguret    schedule 09.01.2013
comment
@Tomalak Точно така. Дори и да не обяснява .each, очевидно е по-чистото решение в този точен случай. - person Denys Séguret; 10.01.2013
comment
Благодаря за съвета. Даденият код обаче прави същото. По някаква причина все още копира първия div надпис към всеки атрибут Title. - person user1060324; 10.01.2013
comment
Сигурен ли си ? Не виждам как е възможно това. Нямаш ли проблем с кеша. - person Denys Séguret; 10.01.2013