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

Question

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

我试图将所有以“_3”结尾的类和ID更改为以“_2”结尾（或者类似地，更改类并且 id 以“_2”结尾以“_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 代码中，从而为发生错误留下了很大的空间。

谢谢， ali

更新：

从下面的建议来看，我认为我已经接近了，尽管我认为我的语法不正确（请参阅代码注释）：

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

$(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
});

我想到两件事：

1. 未执行的两行是使用 $(fieldclone) 作为选择器的行；这是否返回任何要操作的元素？
2. 要使用 ('id_3') 作为选择器，它应该包装在 jQuery 对象中，并且看起来更像 $('id_3')

另外，你说你已经尝试实现 @Chris Jaynes 的答案在您发布的代码中似乎不可见，$('id_3') 不等于他建议的 $('id$=3').

Answer 2

Jquery 有属性选择器，可以让您执行startsWith 和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，就很难确定正确的答案到底是什么。