Question

function buildOrder(data) {
    var $fragment;
    $fragment = $('<div/>');
    for (var i = 0; i < data.length; i++) {
        $fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
    }
    $('#review-section').append($fragment);
}

我基本上想要添加一个标签，其中包含50个使用for循环动态创建的选项。但是我不确定将它添加到<div class="row-container"/>的语法是什么我知道在php中我只是将循环放在中间并回显选项，但是这在javascript中不起作用。

编辑：

看起来像这样：

$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><select><option value="1">1</option> etc...</select><div class="clear"></div></div>');

Answer 1

你可以将一个函数传递给.append并在那里循环：

$("<div>").append(function() {
  var $select = $("<select>");
  for(var i = 1; i <= 50; i++) {
    $("<option>").text(i).val(i).appendTo($select);
  }
  return $select;
});

// returns a jQuery object with one div element (with children):
// <div>
//   <select>
//     <option value="1">1</option>
//     ...
//   </select>
// </div>

混合到您的代码中将是：

var $fragment = $("<div>");

for (var i = 0; i < data.length; i++) {
    var $container = $("<div>").addClass("row-container")
                               .appendTo($fragment);

    $("<div>").addClass("row cupcake-row")
              .text(data[i].name)
              .appendTo($container);

    $("<div>").append(function() {
      var $select = $("<select>");
      for(var i = 1; i <= 50; i++) {
        $("<option>").text(i).val(i).appendTo($select);
      }
      return $select;
    }).appendTo($container);

    $("<div>").addClass("clear")
              .appendTo($container);
}

$("#review-section").append($fragment);

Answer 2

根据您发布的代码：

function buildOrder(data) {
    var $fragment;
    $fragment = '<div><div class="row-container">';
    for (var i = 0; i < data.length; i++) {
        $fragment += '<div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div>';
    }
    $fragment += '</div></div>';
    $('#review-section').append($fragment);
}

但是，在您发布的代码与您的帖子标题不符，您提到的select代码与您在代码中使用div进行了尝试。

如果你想创建select，那么就像：

function buildOrder(data) {
        var $fragment;
        $fragment = '<div class="row-container"><select>'; // taking select within your div
        for (var i = 0; i < data.length; i++) {
            // adding options to select
            $fragment += '<option value="'+ data[i].name +'">' + data[i].name + '</option>';
        }
        $fragment += '</select></div>'; // end select and div
        $('#review-section').append($fragment);
    }

Answer 3

尝试这样的事情

function buildOrder(data) {
    var $fragment = $('<div></div>');
    var options = [];

    for (var i = 0; i < data.length; i++) {
        options.push('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
    }
    $fragment.html(options.join("\n"));

    $('#review-section').append($fragment);
}

创建一个填充选择标记的循环

3 个答案: