Geek asks and answers

JQuery: searching for elements containing specific text

I have a calendar with a list of events below it on my page. When the user clicks on the next or previous button, I want to fill the div with the contents of the lines containing only the current month and year in the calendar. Here is the line structure (created using 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 from jQuery, but I get a huge list of errors:

   $('#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 use FullCalendar to create a calendar, so it is created using this plugin. Now I can get the current month that the user is viewing, but I want to look at the list and find all the lines that contain this month and display them in div.event-list.

+3
source share
3 answers

:

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

:

$('.views-rows', '#all-events').each(function(){...});
+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

+2

Starting with version 1.1.4, jQuery has a selector for selecting elements containing 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
source

More articles:


All Articles