jQuery каждый метод

Я новичок в javascript, и у меня возникли проблемы с использованием метода jQuery "каждый". У меня есть модуль галереи на сайте Joomla, который работает как простой слайдер изображений. Я добавил некоторый код, чтобы включить лайтбокс на связанных изображениях. Что я хотел бы сделать сейчас, так это скопировать заголовок эскиза (который в настоящее время добавляет модуль) в атрибут заголовка в ссылке, чтобы он отображался в лайтбоксе для каждого изображения.

Вот как устроен HTML...

<div class="camera_wrap" id="camera_wrap_106">
<div class="cameraContents">
    <div class="cameraContent">
        <a class="camera_link" href="lightbox-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="lightbox-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="lightbox-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
@ Томалак Верно. Даже если это не объясняет .each, это, очевидно, более чистое решение именно в этом случае. - person Denys Séguret; 10.01.2013
comment
Спасибо за совет. Однако приведенный код делает то же самое. По какой-то причине он все еще копирует первый div заголовка в каждый атрибут заголовка. - person user1060324; 10.01.2013
comment
Уверены ли вы ? Я не понимаю, как это возможно. У вас нет проблем с кешем. - person Denys Séguret; 10.01.2013