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();
});
});
精彩评论