Question

我花了一个小时左右才开始工作。请帮我。在这里找到jsfiddle的链接：http://jsfiddle.net/gbd52cw8/1/

        $(document).ready(function() {
            var filledList = '<li style="display: none;"><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Miami Ohio Redhawks at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-miami-ohio-9-12-2015-9196040">StubHub</a></div><p id="desc">Wisconsin Badgers - Miami Ohio Redhawks Football Tickets - Buy and sell Miami Ohio Redhawks vs Wisconsin Badgers Football Tickets for 12 September at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $40.86</p></div></div></li><li style="display: none;"><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Northwestern Wildcats at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-northwestern-11-21-2015-9196054">StubHub</a></div><p id="desc">Wisconsin Badgers - Northwestern Wildcats Football Tickets - Buy and sell Northwestern Wildcats vs Wisconsin Badgers Football Tickets for 21 November at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $70.11</p></div></div></li><li style="display: none;"><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Rutgers Scarlet Knights at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-rutgers-10-31-2015-9196052">StubHub</a></div><p id="desc">Wisconsin Badgers - Rutgers Scarlet Knights Football Tickets - Buy and sell Rutgers Scarlet Knights vs Wisconsin Badgers Football Tickets for 31 October at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $68.94</p></div></div></li><li style="display: none;"><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Hawaii Warriors at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-hawaii-9-26-2015-9196043">StubHub</a></div><p id="desc">Wisconsin Badgers - Hawaii Warriors Football Tickets - Buy and sell Hawaii Warriors vs Wisconsin Badgers Football Tickets for 26 September at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $49.81</p></div></div></li><li style="display: none;"><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Purdue Boilermakers at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-purdue-10-17-2015-9196049">StubHub</a></div><p id="desc">Wisconsin Badgers - Purdue Boilermakers Football Tickets - Buy and sell Purdue Boilermakers vs Wisconsin Badgers Football Tickets for 17 October at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $66.6</p></div></div></li>';

    var simple = '<strong>OHOYOYOY</strong>';

    $("#all-rests").html(filledList);
    //$("#all-rests").html(simple);


    });

Answer 1

问题在于，当您在DOM中添加新元素时，这些元素的内联样式设置为display:none。

您在DOM中投放的内容已添加到ul，但它不可见。

您正在将li设为display: none。

var filledList = '<li style="display: none;">...
//                    ^^^^^^^^^^^^^^^^^^^^^^

删除这些样式，您可以在DOM中看到这些元素。

Demo

＆＃13;

$(document).ready(function() {
  var filledList = '<li><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Miami Ohio Redhawks at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-miami-ohio-9-12-2015-9196040">StubHub</a></div><p id="desc">Wisconsin Badgers - Miami Ohio Redhawks Football Tickets - Buy and sell Miami Ohio Redhawks vs Wisconsin Badgers Football Tickets for 12 September at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $40.86</p></div></div></li><li ><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Northwestern Wildcats at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-northwestern-11-21-2015-9196054">StubHub</a></div><p id="desc">Wisconsin Badgers - Northwestern Wildcats Football Tickets - Buy and sell Northwestern Wildcats vs Wisconsin Badgers Football Tickets for 21 November at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $70.11</p></div></div></li><li ><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Rutgers Scarlet Knights at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-rutgers-10-31-2015-9196052">StubHub</a></div><p id="desc">Wisconsin Badgers - Rutgers Scarlet Knights Football Tickets - Buy and sell Rutgers Scarlet Knights vs Wisconsin Badgers Football Tickets for 31 October at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $68.94</p></div></div></li><li ><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Hawaii Warriors at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-hawaii-9-26-2015-9196043">StubHub</a></div><p id="desc">Wisconsin Badgers - Hawaii Warriors Football Tickets - Buy and sell Hawaii Warriors vs Wisconsin Badgers Football Tickets for 26 September at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $49.81</p></div></div></li><li ><div class="post-container"><div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff"></div><div class="post-content"><div class="title-business"><h3 id="title" class="post-title">Purdue Boilermakers at Wisconsin Badgers Football Tickets</h3><a id="business" target="_blank" href="http://www.stubhub.com/wisconsin-vs-purdue-10-17-2015-9196049">StubHub</a></div><p id="desc">Wisconsin Badgers - Purdue Boilermakers Football Tickets - Buy and sell Purdue Boilermakers vs Wisconsin Badgers Football Tickets for 17 October at Camp Randall Stadium in Madison on StubHub!</p><p id="price">Price: $66.6</p></div></div></li>';

  var simple = '<strong>OHOYOYOY</strong>';

  $("#all-rests").html(filledList);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<body>
  <p>Hi</p>
  <ul id="all-rests"></ul>
</body>

＆＃13;

Answer 2

显示子元素，因为隐藏了所有li个元素：

$("#all-rests").html(filledList);
$("#all-rests").children().show();

DEMO

尝试填充ul时，jQuery.html（）无效

2 个答案: