在页面上多次将 html 添加到相同的 class

Question

我运行遇到了 jQuery 的 html() 函数的问题。我想多次使用相同的 id/class，但它只能使用一次。

我有这个 jQuery 代码（集成在表单和提交功能中）：

var flFrom = $('#fl-from').val();
var flTo = $('#fl-to').val();
var flFromDate = $('#fl-from-date').val();
var flToDate = $('#fl-to-date').val();
var flPassengers = $('#fl-passengers').val();

$('#flight-from').html(flFrom);
$('#flight-to').html(flTo);
$('#flight-from-date').html(flFromDate);
$('#flight-to-date').html(flToDate);
$('#flight-passengers').html(flPassengers);

这是对应的html

<span id="flight-from"></span>
<span id="flight-to"></span>
<span id="flight-from-date"></span>
<span id="flight-to-date"></span>
<span id="flight-passengers"></span>

它工作得很好，但是，我想使用具有相同 ID 或 class 的多个跨度，并用表单的内容填充所有跨度...所以假设我有 #flight-from 在网站上访问了六次而不是一次。

这有可能吗？

Answer 1

首先，一个id总是每页只有一次...请改用classes。

你可以这样做：

<span class="flight-from"></span>
<span class="flight-from"></span>
<span class="flight-from"></span>
<span class="flight-from"></span>
<span class="flight-from"></span>
<span class="flight-from"></span>

<script type="text/javascript">

    $('.flight-from').html($('#fl-from').val());

</script>

这会用来自#fl-from 的值填充每个 class 命名的航班出发地。

在页面上多次将 html 添加到相同的 class

Add html to same class multiple times on page

html

jquery

append