我正在尝试使用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}}。
答案 0 :(得分: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);
}
答案 1 :(得分:0)
你应该建立一个HTML字符串然后一次追加所有。
以下是一个例子。
var html = '<div><ul>';
for(var i = 0; i < 10; i++){
html += '<li>Test</li>';
}
html += '</ul></div>';
jQuery('#test').html(html);
答案 2 :(得分:0)
您总是追加到$('#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);