jQuery函数自行关闭div上的div [英] Jquery function closing div on append by itself

问题描述

我具有以下功能:

function displayResults(Items) {
                $("#result").text("");
                $("#result").append('<div class="car-offers">');
                $("#result").append('<div class="purple"></div>');
                $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
                $("#result").append('<h3>titleeee</h3>'); // ' + Items[i].Title + '
                $("#result").append('<span>Year: 2003</span>');
                $("#result").append('<span>Milage: 172,000 Km</span>');
                $("#result").append('<span class="price">53,000 QR</span>');
                $("#result").append('<a href="">Link</a>');
                $("#result").append('</div>');

                $("#result").append('<div class="car-offers">');
                $("#result").append('<div class="purple"></div>');
                $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
                $("#result").append('<h3>titlee22</h3>'); // ' + Items[i].Title + '
                $("#result").append('<span>Year: 2003</span>');
                $("#result").append('<span>Milage: 172,000 Km</span>');
                $("#result").append('<span class="price">53,000 QR</span>');
                $("#result").append('<a href="">Link</a>');
                $("#result").append('</div>');
        }

我的问题是，在运行时html的显示方式如下:<div class="car-offers"></div>，因此所有页面都被弄乱了

my problem is that at run-time the html is being displayed like: <div class="car-offers"></div> so all the page is being messed up

推荐答案

您不能使用 .append() .与document.write不同，jQuery的.append()方法将传递的字符串解析为元素，然后将它们附加到DOM.

You cannot append incomplete fragments of HTML with .append(). Unlike document.write, jQuery's .append() method parses the passed string into elements before appending them to the DOM.

因此，当您这样做时:

$("#result").append('<div class="car-offers">');

jQuery将给定的字符串解析为div元素，并将car-offers值分配给其className属性，然后将新创建的元素附加到#result元素.

jQuery parses the given string into a div element and assigns the car-offers value to its className property, then appends the newly created element to the #result element.

通过单个操作附加整个HTML字符串将解决此问题，因此jQuery知道如何正确解析给定的字符串.

Appending the whole HTML string in a single operation will fix that, so jQuery knows how to parse the given string correctly.

就个人而言，我不建议在JS文件中放入那么多HTML.您可以考虑将其放在带有display:none的div内，然后只需在其上调用.show()即可.或将其最初放置在页面中， .detach() 并将其存储在变量中，并将

Personally, I wouldn't suggest putting that much HTML inside of a JS file. You can consider putting that inside of a div with display:none then simply call .show() on it. Or have it initially in the page, .detach() it storing in a variable and .append() it back when necessary.

这篇关于jQuery函数自行关闭div上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！