Question

所以，我有以下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部分，如所需的最终结果所示。

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

谢谢！

Answer 1

您可以使用类.name在div中编写以下代码。您可以使用.each使用类.show_names迭代所有跨度。然后可以使用append将html附加到带有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); });类的div。

$("#test001").multiselect({
        minWidth: 300,
        height: 150,
        header: false,
        noneSelectedText: "Select",
        selectedList: 3
    });


$("#changeStatus").click(function()
   {
   $("#test001").multiselect("disable");
   });                   

   $("#changeStatuss").click(function()
   {
   $("#test001").multiselect("enable");
   });

FIDDLE

Answer 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)?

jQuery foreach变量中的值

2 个答案: