时间戳

首页 > 解决方案 > jQuery each() 循环遍历列表项并分别为每个项目做一些事情

jquery - jQuery each() 循环遍历列表项并分别为每个项目做一些事情

问题描述

我的日历中有一个事件列表（由 CMS 生成），其中一些事件具有“即将推出”状态，而不是在线注册链接。我要将 Coming Soon 文本更改为 mailto 链接并获取事件标题并将其附加到 mailto Url，例如 mailto:info@domain.com?Subject="event-title-here"。这样，收件人将知道电子邮件涉及的事件。

这是我的 HTML：

<ul class="events">          
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 1</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><a href="#">Register Now</a></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 2</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><span>Coming Soon</span></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 3</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><a href="#">Register Now</a></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 4</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><span>Coming Soon</span></span>
        </div>              
    </li>
</ul>

我在包含 Coming Soon 文本的 span 中添加了一个类，我认为这就是我可以遍历这些事件的方式：

(function ($) {
    $('.registration span:contains("Coming Soon")').addClass('email-updates');

    $('.email-updates').each(function() {
        var eventTitles = $(this).closest('.event-title').text();
        $('.registration span:contains("Coming Soon")').html('<a href="mailto:info@domain.com?Subject=' + eventTitles + '>Sign up for email updates</a>');
    });

}(jQuery));

但这对我不起作用。如何在此示例中获取事件标题 2和事件标题 4，并将它们附加到每个 mailto href 中的?Subject=之后的链接中？

标签： jqueryeach

解决方案

尝试使用以下代码：

(function ($) {
 $(document).find('.registration span:contains("Coming Soon")').addClass('email-updates');
  setTimeout(function(){
      $(document).find('.email-updates').each(function() {
          var eventTitles = $(this).closest('.event-title').text();
          $(this).html('<a href="mailto:info@domain.com?Subject=' + eventTitles + '">Sign up for email updates</a>');//You missed the closing double quotes here 
       });
  },500);

}(jQuery));

当我们向 DOM 动态添加元素或类时，我们无法访问它们。我们需要通过 $(document) 来访问它们。

推荐阅读