jQuery縮短代碼

Question

我想縮短此代碼，所以我想使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-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">&nbsp;</span></span></span></span></a></li></ul>'); 

在此先感謝

Answer 1

與\字符轉義你的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">'); 

它的上方是你的長字符串的縮短版，但你的想法，使用\打破JavaScript新行。

Answer 2

當需要追加多個HTML元素把它的最好方式有序，乾淨是這樣分裂的.append()：

$('#myID').append('<p>lorem ipsum</p>') 
      .append('<p>dolor sit amet...</p>') 
      .append('etc...'); 

，但不是很好追加的元素太多...

Answer 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-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">&nbsp;' + 
      '</span></span></span></span></a></li></ul>' 
); 

我可能已經做到了這一點清潔劑，具有較好的縮進，但你應該明白我的意思。據我所知，這比在每一行上調用append要好 - 每個附加操作都需要相當多的時間。

Answer 4

可能最乾淨的解決方案是製作一個jquery容器，通過追加/ appendTo添加所有元素，並在最後插入整個對象到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 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);