Question

我有这个日历的HTML

<table class="homepagemodule report" id="monthly_calendar" align="center" cellspacing="1">
<caption>
<span>Monthly Calendar</span>
</caption>
<tbody>
<tr class="month_header"><th colspan="5">
<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=11&amp;YEAR=2013" title="Previous Month">&lt;</a> Jan 2014 <a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=1&amp;YEAR=2014" title="Next Month">&gt;</a></th><th colspan="2"><select name="LOCATION" size="1" onchange="self.location=this.options[this.selectedIndex].value"><option>Jump To...</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=4&amp;YEAR=2013">May 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=5&amp;YEAR=2013">Jun 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=6&amp;YEAR=2013">Jul 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=7&amp;YEAR=2013">Aug 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=8&amp;YEAR=2013">Sep 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=9&amp;YEAR=2013">Oct 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=10&amp;YEAR=2013">Nov 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=11&amp;YEAR=2013">Dec 2013</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=0&amp;YEAR=2014">Jan 2014</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=1&amp;YEAR=2014">Feb 2014</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=2&amp;YEAR=2014">Mar 2014</option>
<option value="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=123&amp;MONTH=3&amp;YEAR=2014">Apr 2014</option>
</select></th>
</tr><tr class="day_of_week_header"><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr class="oddtablerow"><td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td valign="top"><div class="calendarday">1&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=1&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
<td valign="top"><div class="calendarday">2&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=2&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
</tr><tr class="eventablerow"><td valign="top"><div class="calendarday">5&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=5&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
<td valign="top"><div class="calendarday">13&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=13&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
<td valign="top"><div class="calendarday">14&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=14&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
<td class="today" valign="top"><div class="calendarday">15&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=15&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div><ul><li class="calendar_event_trade">No Trades Allowed starts  at 12:00 p.m. (<a href="http://football21.myfantasyleague.com/2013/league_calendar_setup?L=24779&amp;EVENT_ID=3126760&amp;ACTION=DELETE&amp;INSTANCE=1389805200" title="Delete This Calendar Event" onclick="return confirm('You are now deleting this league calendar event.\nAre you sure that is what you want to do?');">X</a>)</li>
</ul></td>
<td valign="top"><div class="calendarday">16&nbsp;<a href="http://football21.myfantasyleague.com/2013/options?L=24779&amp;O=110&amp;MONTH=0&amp;DAY=16&amp;YEAR=2014" title="Create a New Event On This Day">+</a></div></td>
</tr></tbody></table>

我正在尝试从这个html中取出“今天”的td类并将其放在我页面上其他地方的另一个div中，这样我就不必显示完整的日历，只显示今天的事件。我已经尝试过将这个jquery附加到另一个div但它无效。

<script type="text/javascript">
$('#monthly_calendar td.today').appendTo('#todayevents');
</script>

<div id="todayevents"></div>

Answer 1

您的代码在文档（DOM）准备好之前正在运行。你的代码很好，但因为它运行得太早，它无法正常工作。试试这个：

<script type="text/javascript">

$( document ).ready(function() {
    $('#monthly_calendar td.today').appendTo('#todaycalendar');
});

</script>

$( document ).ready()

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（DOM）已准备好执行JavaScript代码。代码包括在内在$（window）.load（function（）{...}）里面会运行整个页面（图片或iframe），而不仅仅是DOM，已准备就绪。

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Answer 2

尝试将代码包装在DOM中以使其正常工作

$(document).ready(function(){
  $('#monthly_calendar td.today').appendTo('#todayevents');
});

Answer 3

在document.ready中编写代码：

$( document ).ready(function() {
$('#monthly_calendar td.today').appendTo('#todayevents');
});

Answer 4

试试这个DEMO，只需将文档准备好添加到脚本中，以便在DOM准备好后执行脚本。

$(document).ready(function(){
    $('#monthly_calendar td.today').appendTo('#todaycalendar');
});

获取div td类并附加到新div

4 个答案: