jQuery/JavaScript单击，列表ID'；s的名字

首先，我的javascript是非常有限的，所以我不会尝试任何我自己在这一个，因为我只是不知道从哪里开始

所以，我在我的网站上有这样的结构

ul{列表样式类型：无；填充：0}

点击我！

您应该将事件单击附加到

单击我

按钮，如：

$('.clickme').on('click', function(){
  //Your logic here
});

然后使用

each（）

方法遍历所有

li

，并使用jQuery方法

append（）

将值分配到

div

：

点击我！

毫不奇怪，使用jQuery执行此操作是小菜一碟

您需要捕捉元素

上的点击。点击我
如下：

$('.clickme').click(function() {
});

在其中，使用jQuery
.each（）
循环在每个
li
上执行一个函数，其id以
颜色开始：

  $('li[id^="colors_"]').each(function() {
  });

在这里面，获取元素的id和文本，并对其执行任何操作（在本例中，我使用了
console.log
ged它）


$（'.clickme'）。单击（函数（）{
$（'li[id^=“colors_”]”）。每个（函数（）{
console.log（$（this.attr（'id'）+“=>”+$（this.children（$（输入[type=text]））.val（））；
});
});
ul{
列表样式类型：无；
填充：0
}

点击我！




使用纯JS:
Array.prototype.forEach
在列表项上我们可以这样做


document.querySelector（“.clickme”）.addEventListener（“click”，function（））{
var div=document.querySelector（“div.list”）；
//迭代每一个li
Array.prototype.forEach.call（document.queryselectoral（“ul>li[id^='color']），函数（元素）{
var节点=document.createTextNode（element.id+“=>”+element.querySelector（“输入”）.value）；
div.appendChild（节点）；
div.appendChild（document.createElement（“br”））；
});
}，对）；//将单击处理程序分配给按钮
ul{列表样式类型：无；填充：0}
点击我！





首先使用所需的贴图创建一个对象，然后将其附加到
列表中
-请参见下面的演示：

jQuery解决方案：


$（'.clickme'）。单击（函数（）{
$（'ul li'）.map（函数（）{
返回{
姓名：this.id，
值：$（this.find（'input'）.val（）
}
}).get（）.forEach（函数（e）{
$（'.list'）.append（''+e.name+'=>''+e.value+''）；
});
});
ul{列表样式类型：无；}

点击我！





使用
querySelectorAll
&
子项
获取相关数据


document.getElementById（'clickMe'）。addEventListener（'click'，function（）{
让输入text=“”；
var obj={}；
document.querySelectorAll（'li'）.forEach（函数（项）{
inputText+=item.id+''+item.children[0]。value+'

})
document.getElementsByClassName（'list'）[0]。innerHTML=inputText
})
ul{
列表样式类型：无；
}
点击我！





您只想要这三个吗？还会有更多吗？我不知道这其中的哪一部分是动态的，它将构成“找到所有”它们，而不仅仅是寻找这三个。否则，在它们上粘贴一个类，然后通过该类查找它们。您好，是的，至少会有40-50个元素，如：）ID以颜色开头（如：），所以我认为使用类似于[ID^='colors\']的东西查找这些元素应该很好，对吧？我认为jQuery就像苹果一样。它比较短，而且不需要您去做任何工作，但是如果您从它开始，获取JavaScript的内部工作是很困难的。因此，如果OP要求使用纯JS，最好使用纯JS（或两者都使用）。这里答案的不同有两种选择。抱歉耽搁了，你的答案正是我想要的：）谢谢。哦，说实话，这只是一个错误哈哈，我编辑了我的帖子很多，但现在一切都很好，谢谢大家
  $('li[id^="colors_"]').each(function() {
  });

    console.log($(this).attr('id') + " => " + $(this).children('input[type=text]').val());