我正在尝试在我的页面上显示来自播放列表的 YouTube 视频列表。我可以让视频正常显示。我正在尝试按视频的名称或日期添加“排序”，但是当我添加代码时，页面根本不会呈现视频。
这是HTML：
<div class="hg-portfolio-sortable">
<div id="sorting" class="fixclear"> <span class="sortTitle">Sort By: </span>
<ul id="sortBy" class="option-set " data-option-key="sortBy" data-default="">
<li><a href="#sortBy=name" data-option-value="name">Name</a>
</li>
<li><a href="#sortBy=date" data-option-value="date">Date</a>
</li>
</ul> <span class="sortTitle">Direction: </span>
<ul id="sort-direction" class="option-set " data-option-key="sortAscending">
<li><a href="#sortAscending=true" data-option-value="true">ASC</a>
</li>
<li><a href="#sortAscending=false" data-option-value="false">DESC</a>
</li>
</ul>
</div>
<ul id="portfolio-nav" class="fixclear">
<li class="current"><a href="#" data-filter="*">All</a>
</li>
<li><a href="#" data-filter=".websites">Websites</a>
</li>
<li><a href="#" data-filter=".print">Print</a>
</li>
<li><a href="#" data-filter=".logo">Logo</a>
</li>
</ul>
<div class="clear"></div>
<ul id="thumbs"></ul>
这是脚本中的$(window).load(function())：
//SORTING CODE
// settings
var sortBy = 'date',
sortAscending = true,
theFilter = ''; // DEFAULT FILTERING CATEGORY
$('#sortBy li a').each(function (index, element) {
var $t = $(this);
if ($t.attr('data-option-value') == sortBy) $t.addClass('selected');
});
$('#sort-direction li a').each(function (index, element) {
var $t = $(this);
if ($t.attr('data-option-value') == sortAscending.toString()) $t.addClass('selected');
});
$('#portfolio-nav li a').each(function (index, element) {
var $t = $(this),
tpar = $t.parent();
if ($t.attr('data-filter') == theFilter) {
$('#portfolio-nav li a').parent().removeClass('current');
tpar.addClass('current');
}
});
if ($("ul#thumbs").length > 0) {
var $container = $("ul#thumbs");
$container.isotope({
itemSelector: ".item",
animationEngine: "jquery",
animationOptions: {
duration: 250,
easing: "easeOutExpo",
queue: false
},
filter: theFilter,
sortAscending: sortAscending,
getSortData: {
name: function ($elem) {
return $elem.find("span.name").text();
},
date: function ($elem) {
return $elem.attr("data-date");
}
},
sortBy: sortBy
});
}
//END SORTING CODE
//VIDEO CODE
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/SP8CE46F72D4FE9E45?v=2&alt=json&max-results=50&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function (data) {
var list_data = "";
var column_count = -1; // -1;
var end_li = "</li>";
var begin_div = "<div class='inner-item'>";
var end_div = "</div>";
var html_data = "";
$.each(data.feed.entry, function (i, item) {
column_count = column_count + 1;
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var videoDate = item.published.$t;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var description = ""; item.description; //RETURNS Undefined.
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
var begin_li = "<li class='item websites ###' data-date='" + videoDate + "'>";
var even_odd = "even";
var begin_h4 = "<h4 class='title'>";
var end_h4 = "</h4>";
if (column_count % 2) even_odd = "odd";
begin_li = begin_li.replace("###", even_odd);
html_data += begin_li + begin_div +
'<a data-rel="prettyPhoto[iframes]" class="hoverLink" href="' + url + '">' +
'<img src="' + thumb + '" alt="' + feedTitle + '" />' +
'</a>' + begin_h4 +
'<a href="' + url + '" target="_blank"><span class="name">' + feedTitle + '</span></a>' + end_h4 +
'<span class="moduleDesc">' +
'<p>' + description + '</p>' +
'</span>' +
'<div class="clear"></div>' + end_div + end_li;
});
$(html_data).appendTo("#thumbs");
});
简而言之，getJSON 会为每个视频创建 html 并将其附加到<ul id="thumbs">标签中。同样，这是有效的，但是当我添加“排序”代码时，页面现在根本不呈现。任何想法为什么？另外，我试图从提要中获取“描述”，但item.description返回未定义，但所有这些视频都有描述吗？而且我还试图弄清楚为什么它从“从右到左”显示它们。如果你拿起下面的小提琴并附/show加到最后，你会明白我在说什么。为什么不按预期将它们“从左到右”附加？
这是一个把它们放在一起的小提琴：更新的小提琴，我正在使用 jQuery 1.8.2。（即使小提琴说 1.8.3）。
更新
很抱歉与 jsFiddle 混淆...我不知道每次按“更新”后，我还需要向所有人提供该网址（我认为它会更新旧网址）。无论如何，最新的一个现在在链接中。以小提琴当前的位置（版本＃22），我遇到的问题是：
1.) 没有视频正在显示。如果您注释掉此行上方的所有内容，var playListURL=...那么您将看到您获得了视频……但当然，没有排序。2.) 仍然无法description从每个视频中获取（item.description返回未定义） 3.) 如果您注释掉 #1 中的代码，然后附加/show到 URL 的末尾，您将看到呈现的 HTML、视频和所有内容（没有排序）但向下滚动，您会看到它们向右对齐，而不是向左对齐。
