通过数组排序以通过 jQuery 将代码放置在适当的 div 中

Posted 2023-05-08

【中文标题】通过数组排序以通过 jQuery 将代码放置在适当的 div 中

【英文标题】：sorting through an array to place code in the proper divs through jQuery

【发布时间】：2019-08-14 01:27:56

【问题描述】：

目前正在制作一个网站来索引和播放存储在我的硬盘上的电影，我最近从 dvd 上取下来作为一个小项目。我有一个“主电影列表”JSON 文件，其中包含每部电影所需的所有数据，包括名称、视频源、视频海报源和类型，我希望允许将电影放置在多种不同类型中。

目前我遇到的问题是，当我解析流派列表时，它没有将 html 放置在网页上的正确 ID 中。

例如： “流派”：“喜剧、近期、科幻”

我按照我的想法去做，通过 getJSON 并设置一个输出变量，我得到流派值，拆分以使其成为一个数组，并通过循环遍历它们中的每一个来获取元素。它没有把它放在正确的地方。出于某种原因，上面的示例将被放在喜剧、近期、科幻、恐怖和其他一些中，我完全没有理由这样做。

$.getJSON('/webresource/data/movies.json', function(data) 
  console.log(data);
  var output = '';
  var ele = $('');
  $.each(data, function(key, val) 

    output += '<div class="video_box lazy-background" video-src="' +
      val.video_src + '" video-poster-src="' +
      val.video_poster_src + '">' +
      '<h5>' + val.name + '</h5>' +
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (i = 0; i < genresarray.length; i++) 
      var genreelement = $('#' + genresarray[i]);
      genreelement.html(output);
    
  );
);

[ 
  "name": "a star is born", "video_src":"/files/movies/A%20Star%20Is%20Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"


] // this is an example of the json

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
  <h3>RECENTLY ADDED</h3>
  <div class="scroll_box" id="recently"></div>
</div>

<div class="genre_box">
  <h3>ACTION</h3>
  <div class="scroll_box" id="action"></div>
</div>

<div class="genre_box">
  <h3>COMEDY</h3>
  <div class="scroll_box" id="comedy"></div>
</div>

【参考方案1】：

您的output 变量被附加到并保留在您的$.each 循环的每次迭代中。您想要的是附加到$("#action")、$("#comedy") 等的末尾。您应该按照以下方式做一些事情：

$.getJSON('/webresource/data/movies.json', function(data) 
  console.log(data);
  $.each(data, function(key, val) 

    var output = '<div class="video_box lazy-background" video-src="' +
      val.video_src + '" video-poster-src="' +
      val.video_poster_src + '">' +
      '<h5>' + val.name + '</h5>' +
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (var i = 0; i < genresarray.length; i++) 
      var genreelement = $('#' + genresarray[i]);
      genreelement.append(output);
    
  );
);

【讨论】：

非常感谢！经过数小时的头痛后，我最终得到了相同的解决方案，但您的解决方案更简单，我喜欢这样！谢谢！