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

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 代码中，从而为错误的发生留下了很大的空间。

谢谢， 阿里

更新：

根据下面的建议，我想我快到了，尽管我认为我的语法不正确（参见代码 cmets）：

        $('.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 有一些属性选择器，可以让你做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，就很难确定正确的答案到底是什么。

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

想到的两件事：

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

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