开发者

jQuery: Finding elements which contain certain text

I have a calendar with an event list below it on my page. When the user clicks on the next or previous button, I want to populate a div with the contents of rows only containing the currently displayed month and year on the calendar. Here's the structure of the rows (created with 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>

I got this far with jQuery, but I'm getting a huge list of er开发者_Go百科rors:

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

I should also mention that I'm using FullCalendar to create the calendar, so it's created with this plugin. Right now I can get the current month the user is viewing, but I want to go through the list and find all rows that contain this month and display them in the .event-list div.


I couldn't fully understand what you want, but to filter elements by its text use 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


This seems wrong:

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

How about this:

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


Since version 1.1.4, jQuery has a contains selector to select elements containing a specific text.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜