Question

更新：以下是当用户点击推进幻灯片放映时我正在使用的整个功能：

$('#navNext').click(function(){
  var current = $('#slider1').find('li.on');

  if(move !==-2695) {
      move = move - amount;
      templateNum = templateNum +1;
      current.removeClass('on');
      current.next().addClass('on');
      var grabAlt = $('.on img').attr('alt').split('|');
      var holdAlt = grabAlt;

   var grabAlt = $('.on img').attr('alt').split('|');
   $('.altDescription').html('<ul><li>' + grabAlt.join('</li><li>') + '</li></ul>');

      letsMove(move);
      $('.templateName').text('Template' + ' '+templateNum);
  }

}）;

注意：我的'letsMove（移动）;'函数在其他地方被声明为其他小东西。我使用固定宽度的图像滑过，目前必须更改最大/最小值..但现在一切都很好。我现在只关注李的。

我有这个：

var grabAlt = $('.on img').attr('alt').split('|');
var holdAlt = grabAlt;

$('.altDescription').html('<li>' + holdAlt[0] + '</li>' + '<li>' + holdAlt[1] + '</li>' +     '<li>' + holdAlt[2] + '</li>'+'<li>' + holdAlt[3] + '</li>' +'</ul>');

从代码中你可能会看到我正在抓取图像中的alt文本，将管道符号分隔成一个数组，然后将每个项目作为列表项。这一切都很好。

我现在要做的是通过说“对于当前数组中的每个项目，将其包装在<li>,</li>标记中，使其更具动态性。

我正在玩.each()，但我有点混淆了。我认为它可能是这样的：

$(holdAlt).each(function(){
$('.altDescription').html('<li>' +holdAlt+'</li>');})

但是我意识到我没有从数组中传递一个特定的项目......但整个数组然后......好......失败了。

Answer 1

虽然不是传统方式，但我会这样做：

var grabAlt = $('.on img').attr('alt').split('|');

$('.altDescription').html('<ul><li>' + grabAlt.join('</li><li>') + '</li></ul>');

注意：这并未考虑grabAlt可能为空的可能性。

Answer 2

尝试使用this将指向循环中数组的每个项目。

$.each(holdAlt, function(){

   $('.altDescription').append('<li>' +this+'</li>');
});

Answer 3

this是指您传递给each()的函数中的当前元素：

$(holdAlt).each(function(){
    $('.altDescription').append('<li>'+this+'</li>');
});

另请参阅append() vs html()

上的JQuery文档

采用数组并为每个阵列位置添加<li> </li>

3 个答案: