Question

我有一个无序列表，其中包含从JSON对象创建的列表项。 JSON对象中的每个项都有一个index属性。

绑定到UL的jQuery点击事件：

$j("#courseGallery li").bind('click', function () {
   var index = $j("#courseGallery li").index(this);
   GetSelectedCourseInfo(index);
});

jQuery函数，用于根据UL中选定的列表项索引过滤JSON数据：

GetSelectedCourseInfo = function (index) {
    filteredData = $j.grep(sortedCourseData, function (e) {
        return e[index] === index;
    });
    if ($j("#altriaCourseDetails").children().length > 0) {
        $j(this).children().remove(); 
    }
    $j("#altriaCourseDetails").html($j("#selectedCourseTemplate").render(filteredData));
};

JSON数据样本：

[
{
    "index":0,
    "title":"Foo1",
    "description":"Bar1",
},
{
    "index":1,
    "title":"Foo2",
    "description":"Bar2",
},
{
    "index":2,
    "title":"Foo3",
    "description":"Bar3",
}
]

不幸的是，根据索引找不到数组中的项目。任何帮助将不胜感激。

感谢。

Answer 1

每当遇到这样的问题时，请在您遇到此问题的地方设置一个断点。在这种情况下，它将是

的第一行

GetSelectedCourseInfo = function (index) {
filteredData = $j.grep(sortedCourseData, function (e) { //breakpoint here
    return e[index] === index;
});

通过这种方式，您可以检查index和sortedCourseData的值。一旦遇到断点，您还可以在开发工具的控制台中进行比较。

Answer 2

你在过滤器功能中犯了一个错误应该是

return e.index === index

因为您正在访问对象而不是数组;）

小提琴：http://jsfiddle.net/AVWFt/

Answer 3

ccI使用标题解决了问题。

$j("#courseGallery li").bind('click', function () {
                var title = $j(this).children("#courseItemTitle").children("span").text();
                GetSelectedCourseInfo(title);
            });


GetSelectedCourseInfo = function (title) {
    filteredData = $j.grep(sortedCourseData, function (e) {
        return e.title === title;
    });
    if ($j("#altriaCourseDetails").children().length > 0) {
        $j(this).children().remove(); 
    }
    $j("#altriaCourseDetails").html($j("#selectedCourseTemplate").render(filteredData));
};

使用选定的列表项索引在JSON对象上使用jQuery Grep

3 个答案: