如何将HTML元素的ID设置为与JS/jQuery的内部文本相同？

我有一个简单的HTML表单，允许用户输入一个字符串，并通过jQuery创建一个“购物清单”项目。如何将HTML元素的ID设置为与JS/jQuery的内部文本相同？

例如，用户输入桔子形式：

<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>

有一种方法采取的字符串（在这种情况下， “橙子”），并把它变成一个ID id="oranges"里面<span class="shopping-item></span>？

本质上，我想为每个新的.shopping-item范围也分配一个唯一的标识符，以便我可以轻松地跟踪它。

来源

2016-12-14 Santiago Pliego

如果有人两次进入橘子会发生什么？ – bassxzero

如果有人输入“橙汁”或名称中有空格的任何其他物品，会发生什么情况？ –

如果可能，避免这种情况，并将它们作为$（'。shopping-list .shopping-item'）。eq（n）获得第n个等。 – Andiih

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

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

来源

2016-12-14 18:30:45 DevlshOne

现在...在输入“oranges”两次的情况下，您将拥有重复的“id”和无效的DOM。在这种情况下，您可以为每个元素添加'.uinqueid（）'并获取'uuid'风格的唯一'id'。 – DevlshOne

这实际上是一种很酷的方式来提醒用户他们已经在列表中有[dupe item]，并且拒绝添加它，但是如果OP想要允许它，那么您建议的方法会非常棒。 –

好的，这很有帮助。听起来像'.uniqueid（）'是我需要在这里使用的。谢谢！ –

如何将HTML元素的ID设置为与JS/jQuery的内部文本相同？

回答

相关问题