2016-07-02 8 views
1

変数に格納されているjQueryオブジェクトに兄弟要素を追加する必要がある状況があります。 jQueryオブジェクトの前の兄弟に追加された要素が必要です。jQueryでは、コピーを作成せずに別の要素の前に要素を追加する方法はありますか?

簡易版は、明らかに、このhttps://jsfiddle.net/sjncgaLf/4/

$(document).ready(function() { 

    var test = $('<div class = "test">test</div>'); 
    var el = $('<div class = "el">el</div>'); 

    //I want to add el before test (without making a copy) 
    //and then append the selector (el + test) to the DOM 

    el.before(test); 
    $("body").append(test); 
}); 

ようになり、jsfiddleに基づいて、このコードは、望ましい影響を与え達成しません。私の目標は、このような結果を達成することです。

<div class = "el">el</div> 
<div class = "test">test</div> 

元の要素をコピーしないでください。私は.before、.insertBefore、および.addのドキュメントを徹底的に読んできました。そして、それらのどれもが私がここで欲しいものを正確に生み出すものではないようです。

ありがとうございます。

EDIT:

私はより明確にする必要があるとします。私は一度に1カ月分のカレンダーを作っています。私は$マークアップのような変数から始め、月に毎日追加するまで週を追加する必要があります。また、「2016年7月」のように、月にラベルを追加する必要があります。だから、私は私の$マークアップ変数に任意の数週間、追加、またはDOMに何かを追加する前に、私は私の$マークアップはこの

<div class = "label">July 2016</div> 
<div class = "CalendarWeek"></div> 

に見えるようにしたい私は、その月の日数を反復として追加します必要に応じて多くのCalendarWeekとCalendarDay

+0

実際にコードを追加する必要があるかもしれません。エルを追加してこのようなテストを追加するとうまくいくからです:https://jsfiddle.net/sjncgaLf/8/ –

+0

* "...のような結果です:EL、TEST" *あなたが 'el.before(test)'を使っていても...? –

+0

明白な解決策 '$(" body ")からあなたを止めさせるもの。append(el); $( "body")。append(test); '? –

答えて

1

これはjQuery - insertBeforeメソッドを使用して行うことができます。 私はあなたのjsFiddle

$(document).ready(function() { 
    // create elements 
    var test = $('<div class = "test">test</div>'); 
    var el = $('<div class = "el">el</div>'); 
    // add the first element 
    $("body").append(test); 
    // insert the second element 
    el.insertBefore(test); 
}); 
0

、あなただけのためにデータを追加する心配、あなたの変数を編集する必要がありません。あなたの$マークアップ変数のだから、

、それはすでにデータを持っており、あなたの月のラベルが先頭に追加したい場合は、単に使用:

$temp = $label + $markup; 
$markup = $temp; 

あなたの$の最後に数週間または数日間のデータを追加するにはマークアップ変数は、ちょうど使用:あなたは、あなたがしたい場所にそれを追加するjQueryのを使用することができます好きなように構築された変数全体を持ったら

$markup = $markup + $day; 

+0

2つのjQueryオブジェクトを一緒に追加するために '+'演算子を使用することはできません。 – Robert

+0

それはうまく動作します。それはJavaScriptの文字列を連結する一つの方法です。 –

+0

は文字列であり、オブジェクトではありません。 – Robert

関連する問題