Question

我正在尝试使用JQuery附加来自php文件的li个元素。问题是html代码需要根据键值单独附加到不同的html ID。不幸的是，据我所知append()只能在所有元素都关闭的情况下附加正确的html。否则它会自动关闭标签。以下代码无效，因为dval包含<div><li class="some">Some value</li>等代码，append()将使<div><li class="some">Some value</li></div>成为代码。所以我想知道是否有另一种方式，可能是append()以外的函数能够追加html部分？

编辑：

这是我的Jquery：

$.getJSON("../ajax.php", function(data)
{
    $.each(obj, function(key,val)
    {
        $.each(obj[key], function(key, dval)
        {                       
            if(key == "text")
            {                   
                $("#" + key).append(dval);
            }           
        })          
    });
});

这是我的PHP：

$json_arr = $json_arr."[";
if($counter % 2 == 0)
{
    $arr[0] = preg_replace('#<td class="some">(.*?)</td>#', '<li id="1234"><span class="some">$1</span>', $ja[0]);
}
else $ja[0] = preg_replace('#<td class="some">(.*?)</td>#', '<span class="some2">$1</span><div class="somediv"></div></li>', $ja[0]);

$json->id = $closest_key; // Closest key is the ID of an existing li element which is the closest to the current word
$json->text = $ja[0];
$json_arr = $json_arr.'{"id":"'.$json->id.'", "text":"'.addslashes($json->text).'"},';
$json_arr = substr($json_arr,0,-1);
$json_arr = $json_arr."]";
echo(json_encode($json_arr));

如果计数器为偶数<li id="1234"><span class="some">$1</span>，则应将$closest_key附加到<span class="some2">$1</span><div class="somediv"></div></li>，如果是奇数，则应附加{{1}}。

Answer 1

它不是真正的jquery，它正在添加结束标记，它是你的浏览器。为了呈现网页，它需要有一个有效的HTML DOM，它会尝试为您修复错误。

对于一个大的obj，你正在做的事情会很慢，因为在每次追加后，将重新创建整个页面（意味着必须重新计算每个宽度/高度/位置）。（google javascript reflow / repaint）

最好的办法是首先创建完整的HTML字符串，然后附加它。

var html = {};
$.each(obj, function(key,val)
{
    $.each(obj[key], function(key, dval)
    {                       
        if(key == "text")
        {            
            if (html[key]==undefined)
              html[key] = "";

            html[key] += dval.toString();
        }           
    })          
}); 

$.each(html, function(key,val)
{
    $("#" + key).append(val);
}

Answer 2

你应该建立一个HTML字符串然后一次追加所有。

以下是一个例子。

var html = '<div><ul>';

for(var i = 0; i < 10; i++){
    html += '<li>Test</li>';
}
html += '</ul></div>';
jQuery('#test').html(html);

Answer 3

您总是追加到$('#text')，为什么不只是构建字符串，然后追加它呢？

var html = '';

$.each(obj, function(key,val) {
    $.each(obj[key], function(key, dval) {
        if(key == "text") { //the element being appended to is always #text anyway ?
            html += dval;
        }           
    });
});

$('#text').append(html);

是否可以通过JQuery在部分中附加html代码？

3 个答案: