无法获取jquery的数据属性

我试图检索data-cost("#packages")并将其附加到旁边的#form。我没有在控制台中发现任何错误。我看不清楚哪里出了问题。无法获取jquery的数据属性

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>

来源

2014-12-31 user3484925

$(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); 
});

来源

2014-12-31 19:31:55

这不是一个灵活的解决方案，因为你是专门说明看第二个锂 - 如果他添加另一个锂 - 这破坏 - 这是坏。 – remixdesign

对于这个工作，因为它是你必须编辑HTML如下：

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

要么，或访问<li>元素的数据属性而不是div#packages（即#packages ul li而不是#packages）

来源

2014-12-31 19:26:10 JCOC611

另一个问题$（“＃form”）。next（）。next（）。append'不会附加在＃ticket-price的旁边...... – pete

嗨，修改了我的代码以上的建议（都）。但是问题仍然存在。 – user3484925

@ user3484925：如果您的*两个*我的解决方案都不起作用，因为它们互相排斥。您必须* *更改HTML *或*更改jQuery选择器。 – JCOC611

您需要按名称查找数据属性 - 然后查看LI的。

您还需要建立自己的HTML字符串，妥善其追加到＃门票价格

WOKING例（FIDDLE）：http://jsfiddle.net/ojLo8ojz/

JS：

$(document).ready(function(){ 
     var price = $("#packages li[data-cost]").attr("data-cost"); 
     var amount = "<span> "+price+"</span>"; 
     $("#ticket-price").append(amount); 
    });

来源

2014-12-31 19:39:04 remixdesign

无法获取jquery的数据属性

回答

相关问题