Question

我在变量中有一个html现在我想要更改jquery变量中特定元素的id，但我无法做到。

HTML

<tbody id ="testid">
<tr><td></td><tr>
<tr>
    <td colspan="10"  style="font-size:14px;background-color:#5858FA;color: #FFFFFF;cursor:pointer">MYNAME</td>
    <td><input type="text" name ="first_test" id ="test1"></td>
    <td colspan="10"  style="font-size:14px;background-color:#5858FA;color: #FFFFFF;cursor:pointer">CLG</td>
    <td><input type="text" name ="second_test" id ="second2"></td>
    <td colspan="10"  style="font-size:14px;background-color:#5858FA;color: #FFFFFF;cursor:pointer">Address</td>
    <td><input type="text" name ="third_test" id ="second3"></td>
</tr>
</tbody>

代码

var xHtml = $('#test_id tr:gt(0)').map(function(){return this.outerHTML;}).get().join('');
xHtml = $(xHtml).find('#td_id').attr('id', 'tdid_test').end().map(function () {alert(this.outerHTML); return this.outerHTML;}).get().join('');

执行此操作后，我在xHtml变量中得到空白值。请建议我们如何做到这一点

Answer 1

您可以直接更改ID，因为ID是唯一的：

$('#td_id').attr('id', 'tdid_test')

您不需要使用find id并定义id。

此外，您不需要在$(xHtml)中绑定jQuery包装器，只需xHtml即可。

Answer 2

我的理解是你有一个存储在xHtml中的html代码片段并且您希望将一个id替换为另一个id并将其恢复到相同的xHtml变量中。

为什么不使用简单的替换？像

xHtml = xHtml.replace("id", "tdid_test");

Answer 3

不要保存为html，而是保存为对象。克隆对象，更改id并追加。

我有一个例子：

<p id="id1">Some text.</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var x  = $("body");
y = x.clone(true);
y = $(y).find('#id1').attr('id', 'new_id');
$("body").append(y);
</script>

使用您的代码：

var xHtml = $("#testid").clone(true);
xHtml = xHtml.find('#td_id').attr('id', 'tdid_test');
// now you can append

Answer 4

请注意您的HTML已经（并且没有ID test_id）：

<tbody id ="testid">

但是你正在寻找：

$('#test_id')

然后，当您在html中的唯一其他#td_id为：id's时，您正在搜索test1, second2, second3。

下面的代码将提取正确的html并更改id并显示修改后的标记。

WORKING JS FIDDLE DEMO

$(function() {
    var xHtml = $('#testid').html();
    //console.log( xHtml );
    xHtml = $(xHtml).find('#test1').attr('id', 'tdid_test').end().map(function () {
        console.log(this.outerHTML); return this.outerHTML;
    }).get().join('');
    console.log( xHtml );
});

Answer 5

您的变量引用了HTML。如果您不希望在页面上更改ID - 只需使用jQuery Clone()克隆您的HTML部分，如下所示：

var $yourHTMLclone = xHtml.clone();

然后执行您希望的任何更改，因为它是一个普通的jQuery对象。

在变量中更改html元素id

5 个答案: