2016-04-27 12 views
0

私は子供には存在しないが、現時点では、 "コード"は既に存在すると見なすので、それはただ一つに追加され、他人には追加されない、スパンを加えるべきコードを得ました。どのようにして、新しいdivがある場合は、それもそれに追加されますか?JavaScript - 子供にスパンを追加しますか?

あなたは正しい Selectorが必要
if($("#itemcart div").children().length > 0){ 

    } else{ 
     $("#itemcart div").append($("<span> X</span>")); 
    } 
+0

'新しいdiv'があるでしょう - あなたは何を意味するのですか? –

+0

"アイテムカード"をクリックすると、#itemcartの下にdivが作成され、そのXを追加する必要があります。最初のものは行いますが、他のdivのものは追加しません。 –

答えて

0

は知ってはいけない、あなたが複数のdivを持っていて、EVERYのdivはあなたが行うことができます子供のスパンを持っているかどうかを確認したいと仮定すると

$("#itemcart div").each(function(){ 
    if($(this).children().length > 0){ 

    } else{ 
     $(this).append($("<span> X</span>")); 
    } 
}); 

これはすべてのdivで繰り返されます。このループでは、あなたはそれが子供スパンを持っているかどう

このに現在ののdivを参照し、チェックを使用することができ、ここでの例を参照してください:https://jsfiddle.net/3qkpLnd9/1/

+0

私が尋ねることができるなら、多分あなたは私を助けることができます。私はコードを持っていますが、Xをクリックすると削除されますが、Xをクリックするとそれが削除され、idが変数と一致するremoveClassも実行されます。これは、この削除コードがどのように見えるかです: '\t \t $( "#のitemcartスパン")をクリックします(関数(){ \t \t \t $(この).parent()削除() \t \t。});'。私が現時点でremoveClassを追加すると、選択されているすべての項目からそのクラスが削除されますが、id名がspan name/variableと一致するクラスからそのクラスを削除する必要があります。 –

+0

@JacobSeenはい、[データ属性](http://www.w3schools.com/tags/att_global_data.asp)を使用して、更新するIDを格納することができます。たとえば、要素を削除する前に、 '

1: X
'この属性を取得し、removeClassのセレクタとして使用します。私は、例として、フィドルを更新しました:https://jsfiddle.net/3qkpLnd9/3/(またはあなたのコードを共有したい場合、私はそれを見ることができます)。 – pumpkinzzz

1

:私はとにかく、理解している場合

var spanLength = $("#itemcart div span").length; 
if(spanLength > 0){ 
    $("#itemcart div").append($("<span> "+(spanLength+1)+"</span>")); 
} else{ 
    $("#itemcart div").append($("<span> 1</span>")); 
} 
+0

まだそれはX –

+0

あなただけでなく、あなたのHTMLを追加することができます1に追加? – akniazi

+0

@JacobSeen私の答えをチェックして、私はあなたのために更新しました。 – hmd

0

チェックこのコード。ちょうどあなたのセレクタでそれを編集し、それを使用する準備ができている:

$('p.click').on('click', function() { 

    var newDiv = document.createElement('div'), 
    span = document.createElement('span'); 

    span.innerText = 'X'; 

    newDiv.appendChild(span); 

    $('.container').append($(newDiv)); 
}); 

と実際のフィドル:

https://jsfiddle.net/nx1fuffc/

関連する問題