jQueryを使用して複数のDIVのIDを取得し、配列に格納する

Question

現在、html、jQuery、PHPを使用した「テンプレート」作成システムを開発中です。したがって、インターフェイスは非常に基本的なもので、現在divを追加するボタンです。これらのdivには、ボタン、テキストエリア、チェックボックスなどのコンテンツが含まれています。

ボタンをクリックすると、divが追加されます。今私はまた、この新しいdiv IDをjQueryで配列に格納したいと同時に、この配列を概要のIDを持つ別のdivに出力します。

私の現在のスクリプトは次のようになります。私はすべての私のdivのIDを取得し、配列にそれらを格納する場所

function getSteps() { 
     $("#template").children().each(function(){ 
      var kid = $(this); 
      //console.log(kid.attr('id')); 
      $('div.overview').append(kid.attr('id')) 
     }); 
    } 

    $('button').on('click', function() { 
     var btnID = $(this).attr('id'); 
     $('<div></div>', { 
      text: btnID, 
      id: btnID, 
      class: item, 
     }).appendTo('div.template'); 
    }); 

    $(document).ready(function() { 
     getSteps(); 
    }); 

は今、関数getStepsがあります。私が自分のボタンをクリックすると、IDを持つdivを#template divに追加します。

私はクロームで、私のコンソールでエラーが発生します。

Uncaught ReferenceError: item is not defined 
(anonymous function)createtemplate.php:111 
f.event.dispatchjquery.min.js:3 
f.event.add.h.handle.i 

私は少し迷ってしまいましたし、右方向にプッシュしたいと思います。ありがとうございました。

Answer 1

あなたは何ができる

（すべてのdivのIDを取得して。配列にそれらを格納するために）あなたはdoesnのアイテムと呼ばれる変数を使用しようとしているので、

function getSteps() { 
    var ids = []; 
    $("#template").children().each(function(){ 
     ids.push(this.id); 
    }); 
    return ids; 
} 

$(document).ready(function() { 
    var arrayOfIds = getSteps(); 
}); 

Answer 2

あなたはそのエラーを取得します存在しない。私はあなたがクラス「テンプレート」、およびお使いのgetSteps機能を持つ要素に新しいdivを追加している、あなたはまた

class:"item", 

を記述する必要があり、その場合には項目、というクラスを提供したいと思いますid "template"という要素を検索しています。

あなたのコードでは、getSteps関数はDOMの準備ができたら一度実行されると考えてください。あなたはdiv要素を追加するたびにIDのリストを更新したい場合は、クリックイベントのためにあなたのコードの中にそれを実行する必要があります。

function getSteps() { 
    $('div.overview').empty(); 
    $(".template").children().each(function(){ 
     var kid = $(this); 
     //console.log(kid.attr('id')); 
     $('div.overview').append(kid.attr('id')) 
    }); 
} 


$(document).ready(function() { 

    $('button').on('click', function() { 
     var btnID = $(this).attr('id'); 
     $('<div></div>', { 
      text: btnID, 
      id: btnID, 
      class: 'item', 
     }).appendTo('div.template'); 
     getSteps(); 
    }); 

});