Question

我已经坚持了几天，我无法解决它。

我已经使用jQuery完成了它没有任何问题，但我需要它在纯JS中。

这是我的列表生成方式。

function get_friends(items){


if(items != undefined){
    if (items.length != 0){
        var html_friends_list = "";

        for(var count = 0; count < items.length; count++){
            if(items[count].subscription == "both"){
                var display_name = Strophe.getNodeFromJid(items[count].jid);

                html_friends_list = html_friends_list + "<li style='font-size:19px' id='open_chat-" + items[count].jid + "'>" + "<a href='chat-js/index.html'>" + display_name + "<span class='block-list-label' id='" + items[count].jid  + "_unread_messages" + "'>0</span><span class='block-list-label' id='" + items[count].jid  + "_change_status" + "'></span></a></li>";

             }
        }

        document.getElementById("friends-list").innerHTML = html_friends_list;

如上所述，我想保存文本的值和任何li元素的id。

此致

Answer 1

您尚未指定这是针对特定列表还是仅针对您网页上的任何li。下面将记录页面上任何li的id和innerHTML组件。也许您可能需要为特定用例更新querySelector。

var list = document.querySelectorAll('li');

Array.prototype.slice.call(list).forEach(function(listItem){
  listItem.addEventListener('click', function(e){
    console.log(this.id);
    console.log(this.innerHTML);
  });
});

这是一个JSFiddle，我认为这会展示你想要实现的目标。

Answer 2

Jsfiddle

詹姆斯的回答和工作实例的结合。

function get_friends(items) {
    if (items != undefined) {
        if (items.length != 0) {
            var html_friends_list = "<ul>";

            for (var count = 0; count < items.length; count++) {

                if (items[count].subscription == "both") {

                    html_friends_list = html_friends_list + "<li id='open_chat-" + items[count].jid + "'>"+ items[count].display_name +"</li>";

                }

            }
                        html_friends_list = html_friends_list + '</ul>'
            document.getElementById("friends-list").innerHTML = html_friends_list;
        }
    }
}

注意：您应该在创建dom元素后触发原型。

使用纯JS获取li元素的文本和id

2 个答案: