簡體   English   中英

查找,替換和附加新的dom元素

[英]Find, Replace and Append new dom elements

我的目標是瀏覽一個表,並添加一個新的<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>並將idname所有“ _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>

變成了插件

DEMO

(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"));

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM