javascript - 无法使用jQuery获取数据属性

我正在尝试检索data-cost("#packages")并将其附加到#form旁边的Ticket-price。我在控制台中没有任何错误。我看不出有什么问题。

JS：

<script src="jquery-1.11.2.js"></script>
<script>
    $(document).ready(function()
      {
        var price=$("#packages").data("cost");
        var amount=$("<span>"+price+"</span>");
        $("#form").next().next().append(amount);

    });
</script>

HTML：

<div id="packages">
    <h2><u>Tourism Packages:</u></h2>
     <ul>
        <li data-name="Southern Travels">Travels Name:  Southern Travels</li>
        <li data-cost="2000">Cost per person:  2000</li>
        <li>Duration:  3 days & 4 nights</li>
     </ul>
</div>

<div id="form">
    <label>Number of persons </label>
    <input id="input"type="text"/ autofocus>
    <p id="ticket-price">Ticket Price</p>
</div>

最佳答案

$(document).ready(function() {

    // Targeting 2nd li element inside #packages
    var price=$("#packages li").eq(2).data("cost");

    // create a span element with text 'price'
    var amount=$("<span>"+price+"</span>");

    // append as last child of the form
    $("#form").append(amount);
});

关于javascript - 无法使用jQuery获取数据属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27725500/