Question

我的页面上有一个日历，下面有一个事件列表。当用户点击下一个或上一个按钮时，我想填充一个div，其中行的内容仅包含日历上当前显示的月份和年份。这是行的结构（使用Drupal 7 Views创建）。

<div id="all-events">
  <div class="views-rows">
    <div class="field-date">
      <div class="field-content">
        <span>June 2011</span>
      </div>
    </div>
  </div>
  <div class="views-rows">
    <div class="field-event-title">
      <div class="field-content">
        <span>Some Event</span>
      </div>
    </div>
  </div>
</div>

我使用jQuery得到了这么多，但我收到了大量的错误：

   $('#calendar span.fc-button-next').live('click', function(){
      var month = $('#calendar .fc-header-title h2').html();
      $('.event-list').fadeOut(350, function(){
         $(this).html('');
         $('#all-events').each('.views-rows',function(){
            // Code goes here...
         });
      });
   });

我还应该提一下，我正在使用FullCalendar来创建日历，因此它是使用此插件创建的。现在我可以获得用户正在查看的当前月份，但我想查看列表并查找包含本月的所有行并将其显示在.event-list div中。

Answer 1

我无法完全理解您的需求，但要使用filter

按文字过滤元素

<div>text 1</div>
<div> not this text </div>

JS

$("div").filter(function(){
   return $(this).text().indexOf("text 1") >= 0; // if contains desired text
}).html("this one matches 'text 1'");

<强> See this example on jsFiddle

Answer 2

这似乎不对：

$('#all-events').each('.views-rows',function(){...});

这个怎么样：

$('.views-rows', '#all-events').each(function(){...});

Answer 3

从版本1.1.4开始，jQuery有一个contains selector来选择包含特定文本的元素。

$('#calendar span.fc-button-next').live('click', function(){
  var month = $('#calendar .fc-header-title h2').html();
  $('.event-list').fadeOut(350, function(){
     var event_list = $(this).html('');
     $('#all-events .views-rows:contains(' + month + ')').each(function(){
       event_list.append($(this).html);
     });
     event_list.fadeIn();         
  });
});

jQuery：查找包含特定文本的元素

3 个答案: