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

Question

我的頁面上有一個日歷，下面有一個事件列表。 當用戶單擊下一個或上一個按鈕時，我想用僅包含日歷上當前顯示的月份和年份的行的內容填充一個 div。 這是行的結構（使用 Drupal 7 視圖創建）。

<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 來創建日歷，所以它是用這個插件創建的。 現在我可以得到用戶正在查看的當前月份，但我想通過列表 go 並找到包含這個月的所有行並將它們顯示在 .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'");

請參閱 jsFiddle 上的此示例

Answer 2

這似乎是錯誤的：

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

這個怎么樣：

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

Answer 3

從版本 1.1.4 開始，jQuery 有一個包含選擇器，用於指向包含特定文本的 select 元素。

$('#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();         
  });
});