選擇第一個元素的jQuery

這是我的HTML DOM選擇第一個元素的jQuery

<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'); 

    }); 
});

因此，我希望當我點擊添加按鈕，只是前兩個選擇（兩個選擇第一個div的）是紅和所有其他選擇都沒有改變，但我看到怪異的行爲，在第一添加一切正常，但隨後在各添加所有選擇是，除了第二個紅色的，我覺得Target是第一div，也是我選擇目標的Select元素那麼爲什麼所有的select s是紅色的？我的問題在哪裏？

編輯

我對腳本錯誤很抱歉，但這是我的真實腳本：

//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'); 

    }); 
});

來源

2012-05-16 Saeid

我的理解是，你的代碼工作你描述你想讓你的方式，[在這撥弄] （http://jsfiddle.net/eDMyX/），不是？ –

http：// jsfiddle。net/5mhmd /正常工作：o –

在前5分鐘內巧妙地編輯您的問題令人討厭。你最初有'$（'。select'）.css（'color'，'gray'）;'。 – thirtydot

這是可以實現的只是通過稍微改變你的函數。嘗試：

$('.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-16 11:52:43 mattytommo

啊，這也行。添加第一個到它.. – Luceos

你的選擇是對.Addable.Files:first選擇第一與該名稱來選擇，你不希望下選擇第一個div像這樣：.Addable.Files > div:first-child？

來源

2012-05-16 11:55:26 Luceos

工作在http://jsfiddle.net/Y2XhV/，雖然我不確定你想要克隆哪個<div>：有一個保證金或一個有兩個類？您的選擇器適用於後一種情況。然而，也有你的代碼中的一些小改進，使其更簡單：

//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-16 11:56:17 Bergi

我想下面撥弄解決你的目的。

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

我發現你已經寫在下面的行代碼中的錯誤。

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

。在你的代碼中沒有選擇類，而該代碼應該是

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

來源

2012-05-16 11:59:16 Ravi

他已經編輯他的代碼，說這是一個錯誤:) – mattytommo

選擇第一個元素的jQuery

回答

相關問題