5

I'm using jQuery's AJAX for getting new content from server. Data is loaded in JSON:

$.ajax({
    url: url,
    data: {
        'ajax': '1',
    },
    dataType: 'json',
    success: somefunction
});

For server-side application limitation, I'm not able to setup more JSON variables inside so I have to load everything into content. That is why I have to load result into jQuery, than search and replace some elements on page, like this (used in somefunction):

var somefunction = function(data) {
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs
}

EDIT: Please, note that I have to do same process to replace three divs!

There is more about that, but as example, it's enough I hope. My question: For some logic way, I expect that loading result into DOM ($(data.content)), parsing to html (con.find('dix#ajax-content').html()) and back to DOM ($('div#mainContent').html()) seems to me like loosing some resources and decreasing the perfomance so I would like to know if there is any faster way to do it and load DOM directly, like:

$('div#mainContent').dom(con.find('div#ajax-content').dom());

I tried to google it but maybe I don't know what to type in. Also jQuery documentation does not helped me a lot.

Some facts:

  • jQuery 1.9.1
  • jQuery UI 1.10.3 available

Finally, I know that it would be much more better to do something with server-side app to provide more JSON variables, however, I need to write not-so-easy peace of code which is requiring longer time to develop which I don't have right now. Doing it on client side would be temporary solution for now, however, I don't want to decrease performace a lot.

Side-question:

is it correct to use find() function in this case or there is any better one?

EDIT 2 (not working parsing string) I'm expecting this working but it's not:

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);
4

3 回答 3

2

我不确定这会有所帮助：

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

现在您不必设置元素的 html 并获取您刚刚从 JSON 创建的元素的 html。不确定这是否真的更快，但它确实跳过了 2 个 html() 步骤。

于 2013-05-21T01:55:45.980 回答
1

实际上，$(data.content)应该可以正常工作，但您必须记住，顶级元素只能通过.filter()而不是.find(). 如果您希望定位的元素至少比您应该使用的根深一级.find()；在下面的示例中，您可以在适当的地方替换.filter()为。.find()

var $con = $(data.content);
$('div#mainContent')
  .empty()
  .append($con.filter('div#ajax-content'))
  .append($con.filter('div#another-id'))
  .append($con.filter('div#and-another-id'));

您还可以将选择器组合在一起：

  .append($con.filter('div#ajax-content, div#another-id, div#and-another-id'));

最后，由于标识符只能在文档中出现一次，您可以删除该div部分：

  .append($con.filter('#ajax-content, #another-id, #and-another-id'));

更新

data.content好的，当换行符出现在错误的位置时，jQuery 似乎无法正确评估；这应该适用于所有情况：

var wrapper = document.createElement('div');
wrapper.innerHTML = data.content;

var $con = $(wrapper);
于 2013-05-21T01:53:32.197 回答
0

您可以使用.load，尽管我相信它本质上只是同一事物的包装器：

$("#mainContent").load(url + " #ajax-content", data);

您可以通过仅发送特定的 ajax 内容（较少下载和解析）来提高服务器端的性能，尽管这可能很困难。

除此之外，您最好的选择是在 jQuery 上使用 vanilla JS，至少用于附加（innerHTML直接使用）。

于 2013-05-21T01:51:33.140 回答