jQuery缩短代码
我想缩短这个代码,所以我想做3或4行 但是如果我试着做3行,它就不起作用了jQuery缩短代码,jquery,Jquery,我想缩短这个代码,所以我想做3或4行 但是如果我试着做3行,它就不起作用了 $('#uebersicht').append('<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li data-corners="false" data
$('#uebersicht').append('<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ui-btn-up-c"><div class="ui-btn-inner ui-li ui-li-has-alt"><div class="ui-btn-text"><a href="#" class="ui-link-inherit"><img class="ui-li-thumb" src='+icerik.Resim+'><h2 class="ui-li-heading">'+moschee+'</h2><p class="ui-li-desc">'+results[0].formatted_address+'</p><p class="ui-li-desc">'+hesapla(meineLongitude,meineLatitude,icerik.Position.Longitude,icerik.Position.Latitude)+'</p></a></div></div><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-up-c ui-btn-icon-notext" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c" aria-haspopup="true" aria-owns="#purchase"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="d" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow"> </span></span></span></span></a></li></ul>');
附加('ul data role=“listview”data split icon=“gear”data split theme=“d”data inset=“true”class=“ui listview ui listview inset ui corner all ui shadow”>);
用
\
字符转义javascript换行符,如下所示:
$('#uebersicht').append('<ul data-role="lisview" data-split-icon="gear"\
data-split-theme="d" data-inset="true" class="ui-listview \
ui-listview-inset ui-corner-all ui-shadow">');
$('#uebersicht')。追加('”;
上面是长字符串的缩短版本,但是你明白了,使用
\
来打断javascript新行。当你需要附加多个HTML元素时,最好的方法是将.append()
按以下方式拆分:
$('#myID').append('<p>lorem ipsum</p>')
.append('<p>dolor sit amet...</p>')
.append('etc...');
$(“#myID”).append(“lorem ipsum”)
.append(“dolor sit amet…”)
.append('etc…);
但是附加太多的元素不是很好…可以在任何地方拆分它。只需在任意位置结束字符串,添加加号、换行符,然后重新开始字符串。例如
$('#uebersicht').append(
'<ul data-role="listview" data-split-icon="gear" ' +
'data-split-theme="d" data-inset="true" ' +
'class="ui-listview ui-listview-inset ui-corner-all ui-shadow">' +
'<li data-corners="false" data-shadow="false" data-iconshadow="true"' +
'data-wrapperels="div" data-icon="false" data-iconpos="right"' +
'data-theme="c" class="ui-btn ui-btn-icon-right ui-li ' +
'ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ' +
'ui-btn-up-c">' +
'<div class="ui-btn-inner ui-li ui-li-has-alt">' +
'<div class="ui-btn-text">' +
'<a href="#" class="ui-link-inherit">' +
'<img class="ui-li-thumb" src='+icerik.Resim+'>' +
'<h2 class="ui-li-heading">'+moschee+'</h2>' +
'<p class="ui-li-desc">' +
results[0].formatted_address+
'</p> ' +
'<p class="uii-desc">' +
hesapla(meineLongitude, eineLatitude, icerik.Position.Longitude,
icerik.Position.Latitude) +
'</p></a></div></div>' +
'<a href="#purchase" data-rel="popup" data-position-to="window" ' +
'data-transition="pop" title="Purchase album" ' +
'class="ui-li-link-alt ui-btn ui-btn-up-c ui-btn-icon-notext"' +
'data-corners="false" data-shadow="false" data-iconshadow="true" ' +
'data-wrapperels="span" data-icon="false" data-iconpos="notext" ' +
'data-theme="c" aria-haspopup="true" aria-owns="#purchase"> ' +
'<span class="ui-btn-inner">' +
'<span class="ui-btn-text"></span>' +
'<span data-corners="true" data-shadow="true" data-iconshadow="true" ' +
'data-wrapperels="span" data-icon="gear" data-iconpos="notext" ' +
'data-theme="d" title="" class="ui-btn ui-btn-up-d ui-shadow ' +
'ui-btn-corner-all ui-btn-icon-notext">' +
'<span class="ui-btn-inner">' +
'<span class="ui-btn-text"></span>' +
'<span class="ui-icon ui-icon-gear ui-icon-shadow"> ' +
'</span></span></span></span></a></li></ul>'
);
$('uebersicht')。追加(
“'+
“- ”+
'' +
'' +
'' +
“
”
);
我本可以用更好的缩进来完成这个更简洁的操作,但你应该明白了。据我所知,这比在每行调用
append
要好——每个append都需要花费相对较长的时间。最简洁的解决方案可能是制作一个jquery容器,通过append/appendTo和in添加所有元素最后将整个对象插入dom,以避免过多的dom操作/重画
但是对于html字符串,这可能会导致相当长的脚本
var $list = $('<ul>');
$list.data({
'role': 'listview',
'split-icon': 'gear',
// etc...
}).addClass('ui-listview ui-listview-inset ui-corner-all ui-shadow');
$li = $('<li>');
// take the base object and clone it if used multiple times
$li.clone().data({
// fill up data, add classes etc.
}).addClass('classes').appendTo($list);
// and so on with each element, use all the beautiful jquery functions available
// there's no dom manipulation to this point, performance still fine
// now in the end, insert the object into the dom:
$list.appendTo('#uebersicht');
var$list=$(“”);
$list.data({
'角色':'列表视图',
“分割图标”:“齿轮”,
//等等。。。
}).addClass('ui-listview ui listview inset ui corner all ui shadow');
$li=$(“- ”);
//如果多次使用,则获取基本对象并克隆它
$li.clone().data({
//填充数据、添加类等。
}).addClass(“类”).appendTo($list);
//对于每个元素,使用所有漂亮的jquery函数
//目前还没有dom操作,性能仍然良好
//最后,将对象插入dom:
$list.appendTo('uebersicht');
也许对你来说是更好的方式:
var html = '';
html += '<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">';
html += '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child ui-btn-up-c">';
html += '<div class="ui-btn-inner ui-li ui-li-has-alt">';
// etc. just make a line for each tag or split it if too long
$('#uebersicht').append(html);
var html='';
html+=';
html+='- ;
html+='';
//等等。只要为每个标签画一条线,如果太长,就把它分开
$('#uebersicht').append(html);
< /代码>你尝试了哪些方法不起作用?相信我,你不应该通过代码< >附录< /代码>插入一个这样长的字符串。在中间我已经把你真正分开了:/首先,它使它更容易debug@Christoph,向DOM中插入大型html片段的首选方法是什么?您是从性能角度讲的吗f视图,或者仅仅是可读性/可维护性?这让我想哭…你不能以这种方式缩进代码,这完全是一个可怕的解决方案。这种分解字符串的方法,将在第5版ECMAScript标准中添加时得到支持。然而,有些人认为它是。