Question

这是我的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，我还选择了目标的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');

    });
});

Answer 1

这可以通过略微改变你的功能来实现。尝试：

$('.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/

Answer 2

您的选择位于.Addable.Files:first，选择带有该名称的第一个选择，您不想选择下面的第一个div，如下所示：.Addable.Files > div:first-child？

Answer 3

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

当您已经拥有jQuery对象时，您不需要从Target重新创建新的jQuery对象，.css()不需要each。

Answer 4

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

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

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

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

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

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

通过jQuery选择First Element

4 个答案: