如何使用jQuery each分离字符串中的元素

How to separate out elements in a string using jQuery each

本文关键字：元素 字符串 分离 何使用 jQuery each      更新时间：2023-09-26

我对外部站点进行了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>

显然，在我的页面上，这看起来有点乱，我想做的是把它很好地整理成一张桌子。因此，对于每一组结果（即年份、制作、角色、制作名称、公司、导演），表中都应该有一行，如下所示：

<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调用）并将其显示在我的表中？

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

在您的成功回调中：

// 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/

相关文章：