在javascript中创建我的html元素

-1

好的，所以..这段代码可以像现在这样工作，但我需要添加更多的类到列表项中。最有效的方法是什么？理想情况下，该功能将允许我使每个列表项目可编辑......目前这不重要，但那是未来的计划。在javascript中创建我的html元素

var html = ""; // html to put into list 
for (var i = 0; i < window.listings.length; i++) { // window.listings is a list 
    var card = window.listings[i]; // get a listing 
    //   console.log(card.card_name); 
    //window.listings[i].seq = i; 
    html += "<li class='list-item ui-state-default' id=" + i + ">" + card.card_name + ' - ' + card.price + "</li>"; // turn it into a html string with id of its position in window.listings (i) 
} 
//console.log($('.hotList .list-column')); 
$('.hotList .list-column').empty(); 
$('.hotList').append(html); // put new listings html into hot list

编辑：感谢所有帮助所有......我是相当新的这个，所以我的代码是我的女友，我的老板和我自己的跨界混搭的，我试图跟上它全部在这个过程中。我还挺得到塞进学习它之前，我甚至对基础知识把握好..所以..任何帮助感激

来源

2017-04-13 Adrian MuSan

检查下面的答案，如果您最初检查它并且它不起作用，请再次检查它，现在编辑并更正 –

如果你想在核心JavaScript办建立了一个addClass功能：

function addClass(el, classList){ 
el.className += ' '+classList; 
}

编辑：如果你想追加你的字符串之前添加该类，为什么你不只是添加它，因为你做'列表项'？

EDIT2：可以由于正在使用jQuery管理的类

var classes = ['list-item', 'ui-state-default'] 
//then push what you want 
classes.push('newclass'); 
html += "<li class="+classes+" id=" + i + ">" + card.card_name + ' - ' + card.price + "</li>";

来源

2017-04-13 17:50:18

OP没有“el”...现在只是一个html字符串 – charlietfl

它将变得相当复杂，所以我只是想知道构建函数来制作html字符串的最佳方式。如果这是有道理的？（我真的不知道如何说出我在找的东西..我对此表示歉意） –

$("#idOfElement").addClass("yourClass");// add just 1 
$("#idOfElement").addClass("yourClass myClass hisClass"); // add multiple

来源

2017-04-13 17:50:28 victor

OP想要... *“向列表项添加更多类”* – charlietfl

的阵列，可以使用addClass功能的一个或多个类添加到任何选定的元件/秒。见下面的功能。

function addClassesToElements(jquery_selector, class_name){ 
    for(var i=0; i<jquery_selector.length; i++){ 
     $(jquery_selector[i]).addClass(class_name); 
    } 
}

所以，追加后您的html您可以用同样的调用这个函数，

addClassesToElements($('.list-item'), "new-class-1 new-class-2");

，你可以创建一个函数来删除使用的removeClass代替addClass任何现有的类。

希望这有助于。

来源

2017-04-13 18:24:58

在javascript中创建我的html元素

回答

相关问题