0

这是我的 HTML DOM

<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，而且我选择了 Target 的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

您的选择是.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 回答
1

我想下面的小提琴可以解决你的目的。

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

我在您在以下行中编写的代码中发现了一个错误。

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

您的代码中没有选择类，而代码应该是

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