JS/jQueryの内部テキストと等しくなるようにHTML要素のIDを設定するにはどうすればよいですか？

Question

私は、ユーザーが文字列を入力し、jQueryを通して "買い物リスト"アイテムを作成することを可能にする単純なHTMLフォームを持っています。

は、例えば、ユーザーがフォームでオレンジ入り：

<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="oranges"に変えますか？

新しい.shopping-itemスパンにも固有の識別子を割り当てて、簡単に追跡できるようにしたいと思います。

Answer 1

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

これは、最初のものに対してのみ行うことを前提としています。 shopping-listのすべてのアイテムでこれを行う必要がある場合は、.shopping-item要素をループし、thisを使用できます。