如何在 jquery .html() 方法中设置数组或倍数 var？答案

【问题标题】：How to set array or multiples var inside jquery .html() method?如何在 jquery .html() 方法中设置数组或倍数 var？
【发布时间】：2026-02-23 15:45:01
【问题描述】：

我有一个内容为 [a,b,c] 的数组，我需要将它放在 .html() 中

我原来的地方是它的 3 个孩子当我直接说的时候——这样：

$('#listProducts div ul li').html(newElements); (not esactly this code, but I short it)

发生了什么（像这样返回 [abc]）：

<div id=listProducts>
<ul>
  <li>A,B,C</li>
  <li>A,B,C</li>
  <li>A,B,C</li>
</ul></div>

我想要的结果：

<div id=listProducts>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul></div>

我试过了：

$('#listProducts ul li ul li div').html(function(newElements){

for(let i = 0; i < newElements.length; i++){ 
 newElements[i];
}

});

但我研究了 .html() 中的函数，它似乎只接受索引参数。

我想到了类似的东西

 $().html(newElements[0],newElements[1],newElements[2]) or
separe in 3 variables  $().html(element1,newElements2,newElements3) // but i guess its not possible with .html()

有没有办法做到这一点？ Ps：我无法更改 HTML，也无法直接发送 <li> + newElements[i]; 之类的内容，因为它与每个 div、ul 等唯一的后端参数相连。

这是我在 SO 的第一个问题，英语不是我的第一语言。所以如果有任何错误，请给我建议，我会改变。非常感谢！！

编辑1：

测试：

.html(function(i) {
  return arr[i];
});

完整代码：

const arr = $('#listProducts ul li ul li div a').get().sort(function(a, b) {
  return a.getAttribute('href') > b.getAttribute('href') ? 1 : -1;
}).map(function(el) {
  return $(el).clone(true)[0];
});


$('#listProducts ul li ul li div').html(function(i) {
  return arr[i];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="listProducts" class="listagem borda-alpha ">
    <ul data-produtos-linha="3">
      <li class="listagem-linha ">
        <ul class="">
          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2TH ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

        </ul>
      </li>
    </ul>
  </div>

</body>

</html>

预期：

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html>

    <body>
      <div id="listProducts" class="listagem borda-alpha ">
        <ul data-produtos-linha="3">
          <li class="listagem-linha ">
            <ul class="">
              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2ND ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

            </ul>
          </li>
        </ul>
      </div>

    </body>

    </html>

添加：

.get().sort 是按照 URL 的字母顺序对结果进行排序，并且工作正常。
“another div 1”和“another div 2”与other li上的“another div 1”和“another div 2”不同。
不止 3 项。

【问题讨论】：

标签： javascript jquery arrays dom

【解决方案1】：

如果<li> 项目已经在<ul> 中，您可以将一个函数传递给.html() 并使用它提供的索引i 来访问您想要放入每个<li> 的内容，就像这样：

const arr = ['A','B','C'];
$("#listProducts ul li").html(function(i) {
  return arr[i];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

如果<li>s 不在您的<ul> 中，您可以将您的arr 映射到元素列表，然后使用.html() 将这些元素添加到<ul>：

const arr = ['A','B','C'];
$("#listProducts ul").html($.map(arr, function(text) {
  return $('<li>', {text});
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
  <ul>
  </ul>
</div>

编辑：

您可以获取所有<li> 并按锚标记href 属性对它们进行排序。然后，您可以使用 .append() 将已排序的元素附加到您的 DOM。使用.append()而不是.html()的目的是.append()会将元素插入到DOM中，从而删除旧元素并添加新元素（因此不需要.clone()）

const arr = $('#listProducts ul li ul li').get().sort(function(a, b) {
  const anchorA = $("a", a);
  const anchorB = $("a", b);
  return anchorA.attr('href') > anchorB.attr('href') ? 1 : -1;
});
$('#listProducts ul li ul').append(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="listProducts" class="listagem borda-alpha ">
    <ul data-produtos-linha="3">
      <li class="listagem-linha ">
        <ul class="">
          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2TH ELEMENT</a>
              <div class="another 1">1. another div 1</div>
              <div class="another 2">1. another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
              <div class="another 1">2. another div 1</div>
              <div class="another 2">2. another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
              <div class="another 1">3. another div 1</div>
              <div class="another 2">3. another div 2</div>
            </div>
          </li>

        </ul>
      </li>
    </ul>
  </div>

</body>

</html>

【讨论】：

嗨！谢谢您的回复！！物品已经在里面了。所以我尝试了第一个代码，但它只适用于第一个元素，并且在替换元素之前也忽略了（但我之前遇到了这个错误）2个其他元素。知道为什么吗？我附上完整的代码来提问。再次感谢！
@GabrielaWolff 您好，既然您已经附上了完整的代码，您还可以使用您提供的完整 HTML 代码显示您的预期结果吗？
您是否还希望内容<div class="another 1">another div 1</div> 也与<a> 标签一起移动？还是每个内容 div 都应该保留在原来的位置？
是的，我愿意。它们与每个 A 匹配。
非常感谢@NickParsons！这正是我需要的！没有你的帮助，我无法做到，我非常感谢你所做的一切。我什至不考虑.append().（顺便说一句，你的答案中的“3.,2.,1.”（数字，只是文本）乱序/与网址不匹配。不代码中的任何差异，但可能会使任何未来的读者感到困惑。）再次感谢您！