查找，替换和追加新的dom元素

Find, Replace and Append new dom elements

本文关键字：dom 元素 追加 替换 查找      更新时间：2023-09-26

我的目标是遍历一个表，并添加一个新的<tr>，它具有与前一个兄弟相同的数据，但具有一些更改的内容文本。

我的html的一个部分如下:

<tr>
  <td><label>Share - Spanish</label></td>
  <td><input type="text" id="blog_share_es" name="blog_share_es" size="30" /></td>
</tr>

在我当前的Javascript函数中，$(this)是<label>标签。我已经成功地将"西班牙语"一词替换为"意大利语"，如下所示:

    var italian = $(this).text().replace("Spanish", "Italian");

，然后按如下方式将其追加到表中:

var parentDiv = $(this).parent().parent();
$('<tr><td><label>'+italian+'</label></td><td><input type="text" id="logout_de" name="logout_de" size="30"/></td></tr>').insertAfter(parentDiv);

我现在如何选择<input>并将id和name中的"_es"的所有实例替换为"_it"，以便我在html中获得以下输出(获得html的格式是不必要的，但将是最佳的!):

<tr>
  <td><label>Share - Italian</label></td>
  <td><input type="text" id="blog_share_it" name="blog_share_it" size="30" /></td>
</tr>

变成插件

演示

(function ($) {
    $.fn.newRow = function (language, suffix) {
        $lastSibling = this.find("tr").last().clone();
        $label = $lastSibling.find("label");
        $labelText = $label.text();
        $label.text($labelText.replace($labelText.substring($labelText.indexOf("- ") + 2), language));
        $input = $lastSibling.find("input");
        $id = $input.attr("id");
        $name = $input.attr("name");
        $input.attr("id", $id.replace($id.substring($id.lastIndexOf("_") + 1), suffix))
              .attr("name", $name.replace($name.substring($name.lastIndexOf("_") + 1), suffix));
        this.find("tbody").append($lastSibling);
        return this;
    };
})(jQuery);
$("#yourTable").newRow("Italian", "it");

像这样…不确定它是否100%有效，但给你正确的方向

$('input[type=text]').each(function(input) {
    if (input.attr('id').match(/_it/))
        input.attr('id', input.attr('id').replace(/_it/, '_es');
    if (input.attr('name').match(/_it/))
        input.attr('name', input.attr('name').replace(/_it/, '_es');
})

要选择从$(this)开始的输入，您必须使用find()函数，然后您可以使用attr()函数更改属性

var inp = $(this).parent().parent().find("input[type=text]");
inp.attr("id", inp.attr("id").replace("_es","_it"));
inp.attr("name", inp.attr("name").replace("_es","_it"));
相关文章：