Question

我的页面上收到了一个设计，其中包含一组占位符，例如：

  <span id="ApplicationDate_" class="removeMe"></span>

还有其他许多元素以及html内部。这些跨度应该由来自页面上另一个区域的实际输入替换，这些输入看起来像：

<input type="text" id="ApplicationDate_48596977"/>

基本上我需要做的是将所有输入元素放在一个数组中，然后对每个元素，将其ID提升到＆＃34; _＆＃34;，并搜索等于该值的范围，并用此元素替换它，然后使用class = removeMe删除所有跨度，但我无法在代码中实现它，下面是我已经达到的：

$(document).ready(function () {
    var coll = $("input");
    coll.each(function () {
        var id = this.id; //getting the id here
        var substringId = id.substring(0, id.indexOf('_') + 1); //getting the span id
        this.appendTo("#" + substringId); //having problems here..
    });
    $(".removeMe").each(function () {
        this.remove();
    });
});

它告诉我this.appendTo不是一个函数，任何帮助或提示都非常感激。

Answer 1

TL; DR - 只需使用：

$(".removeMe").replaceWith(function() {
    return $("input[id^='" + this.id + "']");
});

原因如下：

this是一个DOM元素，但.appendTo()是一个jQuery方法。您可能只需要在调用jQuery时包含this：

$(this).appendTo("#" + substringId);

这会将<input>元素放在<span>内，如下所示：

<span id="ApplicationDate_" class="removeMe">
    <input type="text" id="ApplicationDate_48596977"/>
</span>

但是，你打电话给：

$(".removeMe").each(function () {
    this.remove();
});

首先，你会遇到与上面相同的问题 - this是一个DOM元素，但.remove()是一个jQuery方法。其次，最好只调用$(".removeMe").remove() - 将其包裹在.each()中是多余的。第三，这将删除跨度，以及输入。那不是你想要做的吗？

如果要使用输入替换范围，请使用.replaceWith()：

var coll = $("input");
coll.each(function () {
    var substringId = this.id.substring(0, id.indexOf('_') + 1);
    $("#" + substringId).replaceWith(this);
});

似乎整个事情都可以改写，利用attribute starts with selector，因为：

$(".removeMe").replaceWith(function() {
    return $("input[id^='" + this.id + "']");
});

在页面

1 个答案:

TL; DR - 只需使用：