Question

我正在尝试使用jQuery更改HTML中的“10”：

<div id="ingredients">
<h2>Ingredients</h2>
<h4>Sugar: <span class="sugar">10</span></h4>

以下是我所经历的不成功的迭代：

$(document).ready(function() {
    $('#ingredients.sugar').html("5");
});

和

$(document).ready(function() {
    $('span[class=sugar]').html("5");
});

另外，如何在变量中存储“10”的值？我正在尝试这样做：

var $sugar = $('#ingredients.sugar').html();

那会有用吗？

谢谢！

亨利

Answer 1

尝试：

$(document).ready(function() {
    $('#ingredients .sugar').html("5");
});

注意之间的空间;这表示从#ingredients父级中寻找一个.sugar孩子。你也应该能够：

var val = $('#ingredients .sugar').html();

Answer 2

您的选择器中错过了空间，这将起作用：

$('#ingredients .sugar').html("5");

Answer 3

这是一个带有简化选择器的版本（不需要#ingredients），工厂缓存和更新而不使用引号（5工作正常）。

// Document ready
$(function () {
    var $sugar = $( '.sugar' ), // Cache jQuery factory
        originalValue = $sugar.html(); // Cache original value
    // Update value
    $sugar.html( 5 );
});

使用jQuery定位和更改HTML内容

3 个答案: