javascript - 如何使用 JS/jQuery 将 HTML 元素的 ID 设置为等于其内部文本？

Question

我有一个简单的 HTML 表单，允许用户输入一个字符串，然后通过 jQuery 创建一个“购物 list ”元素。

例如，用户在表单中输入oranges:

<form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

然后 jQuery 生成这个片段:

<ul class="shopping-list">
        <li>
            <span class="shopping-item">oranges</span>
            <div class="shopping-item-controls">
              <button class="shopping-item-toggle">
                <span class="button-label">check</span>
              </button>
              <button class="shopping-item-delete">
                <span class="button-label">delete</span>
              </button>
            </div>
          </li>

有没有办法获取字符串(在本例中为“oranges”)并将其转换为 ID id="oranges"里面<span class="shopping-item></span> ？

基本上，我想要每一个新的 .shopping-item span 也被分配了一个唯一标识符，以便我可以轻松跟踪它。

Answer 1

$('.shopping-item').eq(0).attr('id') = $('.shopping-item').eq(0).text();

这假设您只想对第一个执行此操作。如果您需要对 shopping-list 中的所有元素执行此操作，您可以遍历 .shopping-item 元素并使用 this。