Question

$('.ed_name').replaceWith(function() {
  return '<input placeholder=' + $(this).text() + ' value=' + $(this).html() + ' class="ed_inp">'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="ed_name">Akshay Verma(Aks)</li>
</ul>

它只返回“Akshay”而不是“Akshay Verma（Aks）”。我也尝试了.html()方法。任何人都可以回答为什么会发生这种情况？

Answer 1

使用jQuery( html, attributes )创建HTML元素，它可以避免报价混乱和潜在问题。

$('.ed_name').replaceWith(function() {
  return $('<input />', {
    "placeholder": $(this).text(),
    "value": $(this).html(),
    "class": "ed_inp"
  });

  //'<input placeholder="' + $(this).text() + '" value="' + $(this).html() + '" class="ed_inp">'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="ed_name">Akshay Verma(Aks)</li>
</ul>

Answer 2

您的属性值未被引用，因此它们将以空格结束。这是半个修复：

$('.ed_name').replaceWith(function () {
    return '<input placeholder="'+$(this).text()+'" value="'+$(this).html()+'" class="ed_inp">'
});

但正确的方法是创建一个元素，而不是HTML：

$('.ed_name').replaceWith(function () {
    return $('<input />', {
        placeholder: $(this).text(),
        value: $(this).html(),
        class: 'ed_inp',
    });
});

Answer 3

您在输入中忘记了双引号：

$('.ed_name').replaceWith(function () {
    return '<input placeholder="'+$(this).text()+'" value="'+$(this).html()+'" class="ed_inp">'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="ed_name">Akshay Verma(Aks)</li>

Answer 4

您的代码完全按照应有的方式工作。 $('.ed_name')是指列表项（<li></li>），.text()是Akshay Verma(Aks)

$（this）.text（）排除空格后的文本

4 个答案: