0

これは私のHTMLDomです

<dd>
   <div class="Addable Files">
     <div style="margin:5px;">
       <select name="Kind" id="kind">
         <option value="1" >K1</option>
         <option value="2" >K2</option>
         <option value="3" >K3</option>
      </select>

     <div class="customfile">
       <span aria-hidden="true" class="customfile-button button">Browse</span>
       <input type="file" name="Files" class="fileupload customfile-input">
     </div>
    <select name="yap">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
  </div>
</div>
<input type="button" value="new" style="margin-top:5px;" class="AddNewE button red" id="AddFiles">
</dd>

そして私のスクリプト：

//Add new Addable div
$('.AddNewE').click(function () {


    var Target = $('.Addable.Files:first');
    var CloneTarget = $(Target).clone();
    CloneTarget.insertAfter('.Addable.Files:last');


    $(Target).find('select').each(function () {
        $(this).css('color', 'red');

    });
});

したがって、[追加]ボタンをクリックすると、最初の2つの選択（最初のdivの2つの選択）が赤になり、他のすべての選択は変更されないことを期待していますが、奇妙な動作が見られます。 2番目を除いて赤である、私Targetは最初であると思いますdiv、そしてまた私はターゲットのSelect要素を選択します、それでなぜすべてselectが赤であるのですか？私の問題はどこにありますか？

編集

スクリプトが間違っていることをお詫びしますが、これは私の実際のスクリプトです。

//Add new Addable div
$('.AddNewE').click(function () {

    var Target = $('.Addable.Files:first');
    var CloneTarget = $(Target).clone();
    CloneTarget.insertAfter('.Addable.Files:last');
    $(CloneTarget).css('color', 'green');

    $(Target).find('select').each(function () {
        $(this).css('color', 'red');

    });
});
4

4 に答える 4

5

これは、関数を少し変更するだけで達成できます。試す：

$('.AddNewE').click(function () {

    var Target = $('.Addable.Files');
    var CloneTarget = $(Target).first().clone();
    CloneTarget.insertAfter('.Addable.Files:last');

    $('select').css('color', 'gray');
        $(Target).find('select').each(function () {
        $(this).css('color', 'red');
    });
});​

変更した点を要約すると、Target変数を編集してすべての.FilesアイテムをターゲットにしてCloneTargetから、最初のターゲットのみを複製するように変更しました.Files。そうすれば、それらをすべて赤に変更することになると、実際には、追加する新しいアイテムを除くすべての既存の.Filesアイテムを変更することになります。

デモ: http://jsfiddle.net/usZPN/

于 2012-05-16T11:52:43.567 に答える
1

次のフィドルがあなたの目的を解決すると思います。

http://jsfiddle.net/meetravi/9ehAF/

次の行に記述されたコードにバグが見つかりました。

 $('.select').css('color', 'gray');

コードにはselectクラスはなく、コードはそうあるべきです

$('select').css('color', 'gray');
于 2012-05-16T11:59:16.800 に答える
1

あなたの選択は.Addable.Files:first、その名前の最初の選択を選択する上にあります。その下の最初の div を次のように選択したくありませんでした.Addable.Files > div:first-childか?

于 2012-05-16T11:55:26.897 に答える
1

http://jsfiddle.net/Y2XhV/のWorksforme 。ただし、どちら<div>を複製するかはわかりません:マージンのあるものと2つのクラスのあるもの? あなたのセレクターは後者のケース用です。ただし、コードを簡単にするためのいくつかの小さな改善があります。

//Add new Addable div
$('.AddNewE').click(function () {

    var $Target = $('.Addable.Files:first');
    var $CloneTarget = $Target.clone();
    $CloneTarget.insertAfter('.Addable.Files:last');

    $Target.find('select').css('color', 'red');
});

Targetすでにある場合から新しい jQuery オブジェクトを再作成する.css()必要はなく、each.

于 2012-05-16T11:56:17.923 に答える