<div id="a">
<div id="b"></div>
<div>
<p>Insert me after #b</p>
要件は、「＃B」の後のpタグが挿入され、挿入操作が再び起こったときに、唯一の代わりに、より多くの追加のpタグに置き換えます。
function insertP(html)
{
var a = $("#a");
var p = a.find("p")
if(p.length == 0)
{
p = $("<p></p>").appendTo(a);
}
p.html(html)
}
これは#A内、＃Bの後に直接挿入されますが、それがすでに存在する場合、それは文句を言わないそれを再度挿入します。あなたの助け
ため
おかげでこれを試してみてください。
$(document).ready(function(){
if ($('#newP').length == 0) {
$('#b').append('<p id="newP">Insert me after #b</p>')
}
});
この関数は、既存の要素を削除して新しい要素を追加します。存在しない場合は単に要素を追加します。
<body>
<script type="text/javascript">
$(document).ready(function() {
function addAfterB(pElement) {
if (!$('#b ~ p')) {
$(pElement).insertAfter('#b');
} else if ($('#b ~ p')) {
$('#b ~ p').remove();
$(pElement).insertAfter('#b')
}
}
addAfterB('<p>New Item 1</p>');
});
</script>
<div id="a">
<div id="b"></div>
<p>hello</p>
<div>
+1へのすべての呼び出しに対してfindとjqueryのセレクタを避けるように、aおよびpグローバルへの参照を改善する可能性があります。これもスプーンの摂食です。 :) – Pradeep
あなたは$の.after（）を使用することができます...
<div id="a">
<div id="b"></div>
<div>
...
<script>
$("#b").after("<p>Insert me after #b</p>");
</script>
好奇心、なぜ、p個の変数を作りますか？私の答えはコードが少なくて効率的ではないでしょうか？私はまだ学んでいるので、私は本当に知らない。 –
このコードでは、acrossステートメントへの参照が使用されるため、変数を使用してjqueryセレクター呼び出しを減らすことをお勧めします。このコードはさらに、完全なロジックのためにinsertP – Chandu