如何在不更改JQuery内部元素的情况下设置文本

Question

我有这个html

<h3 id="price">0.00<sup id="category">N/A</sup></h3>

我使用ajax替换<h3>下的<h3>标签和sup标签，但在使用JQuery设置值后，它将所有内容替换为一个

这是我的片段；

$("#price").text('120.25');
$("#category").text('Bacon');

我的结果只显示'120.25'，并且该类别没有显示

如何解决这个问题？

Answer 1

这是因为您正在修改h3元素。相反，每个动态值都有单独的元素，只需更新所需内容即可。

$("#price").text('120.25');
$("#category").text('Bacon');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3><span id="price">0.00</span><sup id="category">N/A</sup></h3>

Answer 2

text()函数恢复<h3>标记中的所有元素。为了实现这一点，您可以选择html()函数，并一次编写所有函数。

#解决方案1

function change(){
$("#price").html('120.25'+'<sup id="category">Bacon</sup>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="price">0.00<sup id="category">N/A</sup></h3>
<button onClick='change();'>Change it </button>

#解决方案2

可以在同一级别定义所有图元。例如

<tag1>
<insidetag1>Some Text Here</insidetag1>
<insidetag2>Some Text Here</insidetag2>
</tag1>

如果您喜欢这种解决方案，您可以使用text()功能设置文本，单独选择它们。

Answer 3

有几种方法可以做到这一点，在这里我展示了一些方法，并建议用span更改原始标记，并对其进行操作(

注意：这实际上是几个答案合一，以说明差异。

<h3><span id="price-alter">0.00</span><sup id="category-alter">N/A</sup></h3>

$(function() {
// text at the start with original markup, NOTE it has text nodes of both
let torig = $("#price").text();
// original text of node 0
let torigPrice = $("#price").contents().get(0).nodeValue;
let torigCat = $("#category").text();
console.log("torig:", torigPrice, "|", torigCat);
// direct maniplulation of price-2 and its child category-2
let torigone2 = $("#price-2").contents().get(0).nodeValue;
$("#price-2").contents().get(0).nodeValue = "2.34";
$("#category-2").text("Butter");
// direct maniplulation another (yea, don't do this remove/re-add)
$("#category-another").remove();
$("#price-another").text('786.32');
$("#price-another").append("<sup id='category-another'>Not Good<sup>");
// direct maniplulation of alternate markup and its child (probably the right way if you can)
$("#price-alter").text("432.34");
$("#category-alter").text("Milk");
// clone the original, manipulate it and append it as new element (just to demonstrate)
// most often best with "table" rows you want to clone and insert
let myclone = $("#price").clone(true);
// new id just to demonstrate (no dup id)
myclone.attr("id", "#price" + "-new");
// text of the clone
let cloneText = myclone.text();
//  clone and remove the old category from the clone
let savedCat = myclone.find('#category').clone(true);
myclone.find('#category').remove();
// new id just to demonstrate (no dup id)
savedCat.attr('id', 'category-new');
savedCat.text('New Cat Clone');
myclone.find('#category').remove();
// text of the new clone price
myclone.text("123.67");
// add cloned category then append it back
savedCat.appendTo(myclone);
$('#new-markup').after(myclone);
let tClone = myclone.text();
console.log("Values:", torig, "|", torig, "|", torigone2, "|", tClone, "|", $("#price-2").text());
// what you did originally
$("#price").text('120.25');
$("#category").text('Bacon');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Original (whoops):</div>
<h3 id="price">0.00<sup id="category">N/A</sup></h3>
<div>Original (another):</div>
<h3 id="price-another">0.00<sup id="category-another">N/A</sup></h3>
<div>Alternate markup:</div>
<h3><span id="price-alter">0.00</span><sup id="category-alter">N/A</sup></h3>

<div>Original-2 textNode:</div>
<h3 id="price-2">0.00<sup id="category-2">N/A</sup></h3>
<div id="new-markup">NEW markup:</div>