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

Question

我的日历中有一个事件列表（由 CMS 生成），其中一些事件具有 "Coming Soon" 状态而不是在线注册 link。我要将即将到来的文本更改为 mailto link 并获取事件标题并将其附加到 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>

我在“即将推出”文本周围的范围内添加了一个 class，我认为这就是我可以遍历这些事件的方式：

(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));

但这对我不起作用。在这个例子中，我如何获得 Event Title 2 和 Event Title 4 并将它们附加到它们的 links 之后 ?Subject= 在每个 mailto href?

Answer 1

尝试使用以下代码：

(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 添加动态元素或 class 时，我们将无法访问它们。我们需要通过 $(document).

访问它们

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

jQuery each() to loop through list items and do something for each item separately

jquery

each