jQuery - получение заголовка из изображения и размещение его на отдельном теге (каждый) - PullRequest
Новая
       49

jQuery - получение заголовка из изображения и размещение его на отдельном теге (каждый)

0 голосов
/ 30 октября 2010 
$(function () {
    var ptitle = $('div.portfolioItem div.image img').attr("title");
    $(this).each(function () {
        $('a.play').attr({
            'title': '' + ptitle + ''
        });
    });
});

Ну, вот мой код, он работает, но я не очень знаком с каждым тегом.

В настоящее время все, что он делает, это применяет первый 'ptitle' ко всем тегам a.play.

Я пытаюсь получить заголовок каждого изображения и применить его только к соответствующей кнопке a.play.

Вот html, если это поможетпонять: 

<figure class="oneThird">
    <div class="portfolioItem">
        <div class="image">
            <!-- This is the image -->
            <img src="images/portfolio-item-2.jpg" alt="portfolio item" title="test2" />
            <div class="info">
                <p> Alright, go to the link Andrew propose. Download the file. 
                    You need to add it to your project. You can still have 
                    jquery.effects.core this is why this is random fill to 
                    take space.
                </p>
                <span class="base">
                    <!-- Add the img title to the <a class="play"> below -->
                    <a href="images/header-image-2.jpg" rel="prettyPhoto[portfolio]" class="play"></a>
                    <a href="#" class="view">View Project</a>
                </span>
            </div>
        </div>
    </div>
    <h3>
        <a href="#">This is a portfolio item</a>
    </h3>
    <ul class="tags">
        <li><a href="#">Web</a>, </li> 
        <li><a href="#">Print</a>, </li> 
        <li><a href="#">Design</a></li> 
    </ul> 
</figure>

Подводя итог, код уже генерирует все заголовки тега a, но генерирует только первый заголовок и применяет его ко всем тегам a, мне нужны заголовки каждого изображенияпо всей странице, чтобы применить к тегу в определенной области.

Есть идеи?

Ответы [ 2 ]

4 голосов
/ 30 октября 2010

Я думаю, что вы можете перебирать не тот элемент.

Звучит так, как будто вы хотите перебирать каждое из изображений портфолио. Возьмите заголовок с картинки. Ищите div с изображением класса, чтобы найти содержащийся класс воспроизведения Затем примените атрибут. 

$('div.portfolioItem div.image img').each( function(idx,img) {
    var pTitle = img.title;
    $('a.play', $(img).parent('.image')).attr('title',pTitle);
});
2 голосов
/ 30 октября 2010 
$('div.portfolioItem div.image img').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

Найдет каждое из ваших изображений и перебирает каждое. Каждая итерация получит родительский элемент (в данном случае div.info), найдет в нем любой a.play и установит этот заголовок на заголовок изображения. Обратите внимание, что attr () для соответствующего набора «a.play» будет запускаться только для первого соответствующего элемента - при условии, что для каждого изображения будет использоваться только одна кнопка воспроизведения, и это будет хорошо.

Вы также можете рассмотреть возможность присвоения исходным изображениям всего класса, чтобы вы могли изменить код на что-то вроде: 

$('img.mybutton').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

Вы также можете сделать это: 

$('a.play').each(function () {
    this.title = $(this).parents('div.image').find('img.mybutton').attr('title');
});

Который вместо этого будет находить каждую из ссылок воспроизведения, а затем искать соответствующее изображение (вместо поиска изображения и поиска ссылок воспроизведения). Опять же, это предполагает, что вы добавили класс «mybutton» к изображениям.

...