javascript - 如何分别使用 jQuery 分隔字符串中的元素

Question

我对外部站点进行了 Ajax 调用，以从特定元素获取一些信息并将其作为字符串返回到我的站点。

这是 AJAX 调用的代码:

$.ajax({
   url: 'http://cors.io/?u=http://www.spotlight.com/6298-9058-7917',
   type: 'GET',
   success: function(res) {
      var data = $.parseHTML(res);           

       $(data).find('.credit').each(function(){
          $('#credits').append($(this).html());
     });

   }
 });

这会获取外部站点上名为 .credit 的 div 的所有内容，并返回如下所示:

<div id="credits">
    <span class="creditYear">2010</span>, <span class="creditProductionType">Television</span>, <span class="creditCharacterRole">Cop Nicola Lanza</span>, <span class="creditProductionName">“Un posto al sole”</span>, <span class="creditCompany">Grundy</span>, <span class="creditDirector">Various</span><span class="creditYear">2008</span>, <span class="creditProductionType">Television</span>, <span class="creditCharacterRole">Lawyer Moroni</span>, <span class="creditProductionName">“Il Bene e il Male”</span>, <span class="creditCompany">Italy</span>, <span class="creditDirector">Giorgio Serafini</span>
</div>

显然，在我的页面上，这看起来有点乱，我希望能够将它的样式很好地放入表格中。因此，对于每组结果(即年份、制作、 Angular 色、制作名称、公司、导演)，表中应该有一行，如下所示:

<table>
    <tr>
        <td class="year"></td>
        <td class="production_type"></td>
        <td class="character_role"></td>
        <td class="production_name"></td>
        <td class="company"></td>
        <td class="director"></td>
        <td class="director"></td>
    </tr>
</table>

...但是每组结果一行。是否可以附加每个相应的信用(来自 AJAX 调用)并将其显示在我的表格中？

Answer 1

您可以通过将每个跨度中的数据复制到表格的相关单元格来实现:

在你的成功回调中:

// Set up the table however you want it to be formatted
var $tableTemplate = $('<table><tr>' +
  '<td class="year"></td>' +
  '<td class="production_type"></td>' +
  '<td class="character_role"></td>' +
  '<td class="production_name"></td>' +
  '<td class="company"></td>' +
  '<td class="director"></td>' +
  '</tr></table>');

$(data).find('.credit').each(function(){
  // Copy the data from the request to a copy of the table
  var $newTable = $tableTemplate.clone();
  var $creditData = $(this);
  $newTable.find('.year').text($creditData.find('.creditYear').text());
  $newTable.find('.production_type').text($creditData.find('.creditProductionType').text());
  $newTable.find('.character_role').text($creditData.find('.creditCharacterRole').text());
  $newTable.find('.production_name').text($creditData.find('.creditProductionName').text());
  $newTable.find('.company').text($creditData.find('.creditCompany').text());
  $newTable.find('.director').text($creditData.find('.creditDirector').text());

  // And append it to your div (or whatever you want to put it in)
  $('#credits').append($newTable);
}

演示:https://jsfiddle.net/p5zetyam/