jQuery foreach 变量中的值答案

【问题标题】：jQuery foreach values in variablesjQuery foreach 变量中的值
【发布时间】：2016-01-12 17:29:23
【问题描述】：

所以，我有以下 html：

<div class="all_names">
    <span class="name" data-name="1">Steve</span>
    <span class="name" data-name="2">Mike</span>
    <span class="name" data-name="3">Sean</span>
    <span class="name" data-name="4">Emily</span>
</div>
<div class="show_names"></div>

那么对于js：

jQuery(document).on( 'click', '.all_names', function(e) {
    var name = jQuery(this).html(); ????    
    var name_number = jQuery(this).data("name");????

    var show_names ='<div class="show" id="'+ name_number + '">'+ name + '<div>';  ????           

    jQuery('.show_names').html(show_names);

}

那么期望的最终结果应该如下：

<div class="show_names">
    <div class="show" id="1">Steve<div>   
    <div class="show" id="2">Mike<div>   
    <div class="show" id="3">Sean<div>   
    <div class="show" id="4">Emily<div>   
</div>

这是我的问题：

当点击类all_names时，我想将所有名称（以及对应的name number）保存到变量中。

然后，我想使用这些值来加载单个值的 html 部分，如所需的最终结果所示。

我如何实现这一目标？任何帮助将不胜感激。

谢谢！

【问题讨论】：

所需的最终结果 HTML（ID 现在具有 data-name 之前的值）和您的描述 “我想将所有名称（和相应的名称编号）保存到变量中” 彼此无关。

标签： jquery

【解决方案1】：

您甚至可以在带有all_names 类的div 的click 中编写以下代码。您可以使用.each 来遍历类.name 的所有跨度。然后可以使用append 将html 附加到具有.show_names 类的div 中。

jQuery( "span.name" ).each(function( index ) {
  var html = '<div class="show" id="'+ jQuery(this).data("name")+ '">'+ jQuery(this).text()+ '</div>';
  $( "div.show_names" ).append(html);
});

FIDDLE

【讨论】：

【解决方案2】：

您可以使用此代码（从每个 span 内部文本及其数据名称属性构建 html 代码字符串：

jQuery(document).on( 'click', '.all_names', function(e) {
    var string = '';
    jQuery(this).find('span').each(function(){
        string += '<div class="show" id="'+ jQuery(this).attr("data-name") + '">'+ jQuery(this).text() + '</div>';
    });
    jQuery('.show_names').html(string);
});

顺便说一句 - 小心使用整数作为元素的 id，不建议这样做！如果您必须这样做，我建议您熟悉 css 通过 id 选择这些元素的方法：

How to select an element that has id starting with a digit (css)?

【讨论】：