Question

我正在克隆一个字段集并在创建新克隆时递增属性名称。但是，如果我删除克隆，我希望同样的事情发生，以便删除后的任何克隆字段集将填补空白。如同，如果第二个克隆被删除，则第三个被重命名为第二个等。

我正在尝试将以“_3”结尾的类和ID更改为以“_2”结尾（或类似地，更改类和以“_2”结尾的id以“_1”结尾）。目前，我正在使用jQuery单独更改每个特定的类或ID，我只是认为必须通过过滤掉类的下划线部分或ID名称并指定要更改的内容来更有效地搜索它们。到。

我正在克隆的HTML代码：

<fieldset class="basic_info">
    <h3 class="title_0">About You </h3>
                <div class="details">
                    <a class="delete driver_0" href="javascript:void(0);">Delete this driver</a>
                    <div class="proposer dob">
                        <label for="dob_0">Date of Birth</label><input type="text" name="dob_0" id="dob_0" /><span>Example: 30/07/1980</span>
                    </div>
                    <div class="proposer gender">
                        <span class="gender">Gender</span>
                        <input type="radio" name="gender_0" id="female_0" value="female" />
                        <label for="female_0">Female</label>
                    </div>
                    <div class="proposer gender">
                        <span class="invisible">&nbsp;</span>
                        <input type="radio" name="gender_0" id="male_0" value="male" />
                        <label for="male_0">Male</label>
                    </div>
                    <div class="proposer license_type">
                        <label for="license_type_0">License Type</label><select name="license_type_0" id="license_type_0"><option id="0">Please Select ...</option><option id="hide">Provisional</option><option id="show1">Full EU</option><option id="show2">Full Irish</option></select>
                    </div>
                    <div class="license_age_0 opt_show1 opt_show2">
                        <div>
                            <span>How long have you had your full license?</span>
                            <input type="radio" name="license_age_0" id="plus_five_yrs_0" value="female" />
                            <label for="plus_five_yrs_0">More than 5 Years</label>
                        </div>
                        <div>
                            <span class="invisible">&nbsp;</span>
                            <input type="radio" name="license_age_0" id="lessthan_five_yrs_0" value="male" />
                            <label for="lessthan_five_yrs_0">Less than 5 Years</label>
                        </div>
                    </div>

                </div>
            </fieldset>

以下是删除后重命名的jquery代码：

$('.delete').live('click', function() {
if($(this).hasClass('driver_1')){
    $('<h3 class="title_1">Driver 1</h3>').replaceAll('.title_2');
    $('<h3 class="title_2">Driver 2</h3>').replaceAll('.title_3');
    $(".driver_2").addClass("driver_1").removeClass("driver_2");
    $(".driver_3").addClass("driver_2").removeClass("driver_3");
    $("#dob_2").attr("id","dob_1");
    $("#dob_3").attr("id","dob_2");
    $('label[for="dob_2"]').attr("for","dob_1");
    $('label[for="dob_3"]').attr("for","dob_2");
    $('label[for="female_2"]').attr("for","female_1");
    $('label[for="female_3"]').attr("for","female_2");
    $('label[for="male_2"]').attr("for","male_1");
    $('label[for="male_3"]').attr("for","male_2");
    $('label[for="license_type_2"]').attr("for","license_type_1");
    $('label[for="license_type_3"]').attr("for","license_type_2");
    $('label[for="plus_five_yrs_2"]').attr("for","plus_five_yrs_1");
    $('label[for="plus_five_yrs_3"]').attr("for","plus_five_yrs_2");
    $('label[for="lessthan_five_yrs_2"]').attr("for","lessthan_five_yrs_1");
    $('label[for="lessthan_five_yrs_3"]').attr("for","lessthan_five_yrs_2");
    $("#female_2").attr("id","female_1").attr("name","gender_1");
    $("#female_3").attr("id","female_2").attr("name","gender_2");
    $("#male_2").attr("id","male_1").attr("name","gender_1");
    $("#male_3").attr("id","male_2").attr("name","gender_2");
    $("#gender_2").attr("id","gender_1").attr("name","gender_1");
    $("#gender_3").attr("id","gender_2").attr("name","gender_2");
    $("#licence_type_2").attr("id","licence_type_1");
    $("#licence_type_3").attr("id","licence_type_2");
    $("#plus_five_yrs_2").attr("id","plus_five_yrs_1");
    $("#plus_five_yrs_3").attr("id","plus_five_yrs_2");
    $("#lessthan_five_yrs_2").attr("id","lessthan_five_yrs_1");
    $("#lessthan_five_yrs_3").attr("id","lessthan_five_yrs_2");
}
if($(this).hasClass('driver_2')){
    $('<h3 class="title_2" style="-moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px;">Driver 2</h3>').replaceAll('.title_3');
    $(".driver_3").addClass("driver_2").removeClass("driver_3");
    $("#dob_3").attr("id","dob_2");
    $('label[for="dob_3"]').attr("for","dob_2");
    $('label[for="female_3"]').attr("for","female_2");
    $('label[for="male_3"]').attr("for","male_2");
    $('label[for="license_type_3"]').attr("for","license_type_2");
    $('label[for="plus_five_yrs_3"]').attr("for","plus_five_yrs_2");
    $('label[for="lessthan_five_yrs_3"]').attr("for","lessthan_five_yrs_2");
    $("#female_3").attr("id","female_2").attr("name","gender_2");
    $("#male_3").attr("id","male_2").attr("name","gender_2");
    $("#gender_3").attr("id","gender_2").attr("name","gender_2");
    $("#licence_type_3").attr("id","licence_type_2").attr("name","licence_type_2");
    $("#plus_five_yrs_3").attr("id","plus_five_yrs_2").attr("name","license_age_2");

$("#lessthan_five_yrs_3").attr("id","lessthan_five_yrs_2").attr("name","license_age_2");
}
$(this).parent().parent('.additional_driver').remove();
$('#clonetrigger').show();
    $('h3').corner("7px tl tr");

    return false;
        });

    }
};

是否有人能帮助我指出正确的方向。我认为我接近这一点的方式很危险，因为对html的任何更改都意味着这些更改将需要反映在上面的jquery代码中，从而为发生错误留下了很大的空间。

谢谢，阿里

更新

根据下面的建议，我认为我差不多了，虽然我认为我的语法不正确（参见代码注释）：

        $('.delete').live('click', function() {
            if($(this).hasClass('driver_1')){
                var id_1 = $("[id$=_1]").attr("id"); // THIS WORKS PERFECTLY
                var class_1 = $("[class$=_1]").attr("class"); // THIS WORKS PERFECTLY
                var for_1 = $("[for$=_1]").attr("for"); // THIS WORKS PERFECTLY
                var name_1 = $("[name$=_2]").attr("name"); // THIS WORKS PERFECTLY
                var id_2 = $("[id$=_2]").attr("id"); // THIS WORKS PERFECTLY
                var class_2 = $("[class$=_2]").attr("class"); // THIS WORKS PERFECTLY
                var for_2 = $("[for$=_2]").attr("for"); // THIS WORKS PERFECTLY
                var name_2 = $("[name$=_2]").attr("name");// THIS WORKS PERFECTLY
                var id_3 = $("[id$=_3]").attr("id"); // THIS WORKS PERFECTLY
                var class_3 = $("[class$=_3]").attr("class"); // THIS WORKS PERFECTLY
                var for_3 = $("[for$=_3").attr("for"); // THIS WORKS PERFECTLY
                var name_3 = $("[name$=_3]").attr("name"); // THIS WORKS PERFECTLY
                $(fieldclone).find(id_2).each(function(){
                    ("id_2").replaceWith.("id_1"); // THIS LINE ISN'T EXECUTING
                });
                $(fieldclone).find(id_3).each(function(){
                    ("id_3").replaceWith.("id_2"); // THIS LINE ISN'T EXECUTING
                });
            }

谢谢，阿里

Answer 1

Jquery有一些属性的选择器，可以让你做startWith和endswith。

$（“id $ = _ 2”）将是“id以_2结尾”

的选择器

然后你可以遍历结果列表并根据旧的id设置新的id。

参考： http://api.jquery.com/attribute-ends-with-selector/

<强>更新

我开始担心你可能会让它变得更加复杂。您可能需要备份并思考如何设置此页面的样式，如果这是您在此列表中添加和删除新元素时必须执行的操作。

话虽如此，我还在考虑更像这样的事情：

$("id$=_2").each( updateID );

//This'll only do IDs, but you can extned it to do the other attributes
function updateID()  
{
    //Jquery changes 'this' to point to the current 
    //element in the list when you use the 'each' method
    var old_id = $(this).attr("id");  //get the old id
    var new_id = old_id.replace("_2", "_3"); //update it
    $(this).attr("id", new_id);  //set it
}

但是试图像这样设置这些元素的所有样式可能不是问题恕我直言的正确解决方案。可能有更好的方法来做到这一点，但如果没有完全理解这个问题，并且没有看到你的HTML和CSS，就很难找到正确答案的真正含义。

Answer 2

$(fieldclone).find(id_2).each(function(){
   ("id_2").replaceWith.("id_1"); // THIS LINE ISN'T EXECUTING
});
$(fieldclone).find(id_3).each(function(){
   ("id_3").replaceWith.("id_2"); // THIS LINE ISN'T EXECUTING
});

想到两件事：

未执行的两行是使用$(fieldclone)作为选择器的行;这会返回任何要操作的元素吗？
要使用（'id_3'）作为选择器，它应该包装在jQuery对象中，看起来更像$('id_3')

此外，您说您已尝试实施@Chris Jaynes的回答，但在您发布的代码中似乎未显示，$('id_3')与其建议的$('id$=3')不同。

如何更改多个类的特定文本

2 个答案: