尝试填充ul时jQuery.html（）无法正常工作

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样式display: none 。

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

删除这些样式，您将看到DOM中的元素。

演示

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

 <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> 

Answer 2

显示所有隐藏的li元素的子元素：

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

DEMO