Question

我正在尝试搜索播放列表，我可以做到这一点，只是当我尝试将它们组织成2d数组时，结果会被推送到每个播放列表而不是它所属的播放列表。

        var search_results = [];    
        var result = [];
        //loop through playlists
        $('#playlist-menu .row').each(function(){
            var playlist_name = $('.name', this).text();

            //make the playlist active
            $('#playlist-menu .row').removeClass('selected');
            $(this).addClass("selected");

            //loop through songs in this playlist
            $("#media-panel .row").each(function(){
                 var author  = $('.author', this).text();
                 var title = $('.title', this).text();

                 if( author.toLowerCase().indexOf(commands[1]) >=0 || title.toLowerCase().indexOf(commands[1]) >= 0){
                     //found a match
                     result.push({'author':author,'title':title});
                 }
            });

            if(result.length>0){
                search_results[playlist_name] = result;
                result = [];
            }

        });
        console.log(search_results);

我的结果比这要大得多，但这里有一个我要回来的样本

    [60s: Array[2], 70s: Array[2], 80's: Array[2], 90s: Array[2], Accapella: Array[2]…]
    60s: Array[2]
    0: Object
    author: "everything I can't have"
    title: "Robin Thicke [STEP UP 2]"
    __proto__: Object
    1: Object
    author: "Toxic"
    title: "16bit Dubstep Mix ( Yael Naim Vocals )"
    __proto__: Object
    length: 2
    __proto__: Array[0]
    70s: Array[2]
    0: Object
    author: "everything I can't have"
    title: "Robin Thicke [STEP UP 2]"
    __proto__: Object
    1: Object
    author: "Toxic"
    title: "16bit Dubstep Mix ( Yael Naim Vocals )"
    __proto__: Object
    length: 2
    __proto__: Array[0]
    80's: Array[2]

你可以看到它只是进入每个播放列表。

任何人都可以看到它的错误吗？

再次更新 我正在为plug.dj创建一个bookmarklet，媒体面板只存在一次，并且不在同一个DOM对象中。但是，我添加了子选择器以确保不是问题。我认为通过将类更改为选定将触发播放列表激活，使媒体显示在媒体面板中。然后我试图将其分解，以便我能看到它正常工作。我为点击添加了一些延迟，检查了我的目标等。我似乎无法模仿用户体验，这是使媒体面板填充所需的。

之前说过，因为媒体面板没有改变，这就是我获得重复数据的原因。

那么让我失望的是，为什么jquery点击事件结果会与用户点击事件不同？

Answer 1

我认为您在查询scope时遗漏了media-panel。假设dom的结构是这样的

<div id='playlist-menu'>
  <div class='row'>
    <div class='name'>60's</div>
    <div id='media-panel'>
      <div class='row'>
        <div class='author'>60's author 1</div>
        <div class='title'>60's title 1</div>
      </div>
      <div class='row'>
        ...
      </div>
      <div class='row'>
        ...
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='name'>70's</div>
    <div id='media-panel'>
      <div class='row'>
        <div class='author'>70's author 1</div>
        <div class='title'>70's title 1</div>
      </div>
      <div class='row'>
         ...
      </div>
    </div>
  </div>
</div>

您需要找到里面的<{1}} 当前所选的播放列表，所以在您的js中，更改

#media-panel .row

到

 $("#media-panel .row").each(function(){ ... })

或

$("#media-panel .row", this).each(function(){ ... })

授予 - 我假设DOM结构。如果我关闭，请发布实际HTML的片段。

编辑：此外，我想到如果这个dom是正确的，那么你可能有多个$(this).find('#media-panel .row').each( ... )元素可能会导致麻烦，因为每个页面应该有唯一的media-panel元素。您可能需要id成为一个类而不是一个id来使事情有效。

Answer 2

您的代码中存在一些错误。最重要的是，您的代码无法正常运行的主要原因是您的选择器错误。您正在选择

$('#playlist-menu .row').each()
//...
("#media-panel .row").each()

您正在使用Descendant Selectors，分别在.row和#playlist-menu下选择#media-panel类的任何元素。这会让您选择歌曲两次;一次用于播放列表 - 菜单循环，再一次用于媒体面板循环。您应该使用Child Selectors来定位正确的元素。

$('#playlist-menu > .row').each()
//...
(".media-panel .row").each()

此外，我不明白为什么在迭代元素以进行索引时添加和/或删除.selected类。

最后，在检查indexOf是否存在某些内容时，您应该检查equality to -1。在这种特定情况下，您的使用不会破坏您的代码，但在其他一些情况下可能会这样做。

这是一个小提琴。我相信它可以按照你的意愿运作：http://jsfiddle.net/9frb61c3/2/

编辑：我忽略的另一个错误是，正如@mr罗杰斯指出的那样，ID在DOM中应该是唯一的。将您的media-panel更改为class。

将数组推送到数组

2 个答案: