将UL LI项目转换为变量，然后将变量从变量转换回UL LI项目

我该如何将所有UL LI列表项目存储到逗号分隔变量中，反之亦然从逗号分隔变量返回到我的UL李列表。接受jQuery的使用。将UL LI项目转换为变量，然后将变量从变量转换回UL LI项目

实施例＃1

function var_2_items() { 
var x = apple,oranges,grape fruit,pears,kiwi,mango,bananas 

then take the above var, cycle though it and add each item to the UL LI #list1 
}

[＃LIST1]现在包含：

apple 
oranges 
grape fruit 
pears 
kiwi 
mango 
bananas

实施例＃2

[#LIST1] 
    apple 
    oranges 
    grape fruit 
    pears 
    kiwi 
    mango 
    bananas 

function items_2_var() { 

cycle through the #list1 and create a new string and store it into the var x 

var x = apple,oranges,grape fruit,pears,kiwi,mango,bananas 
}

这里是标记：

<!DOCTYPE html> 

<html> 
<script src="jquery.min.js"></script> 
<head> 

<style type="text/css"> 
* { 
    font-size: 9pt; 
    font-family: Segoe UI; 

} 
#refdocs { 
    border: 0; 
    padding: 2px; 
} 
#box1 { 
    border: 1px solid rgb(170,170,170); 
    width: 200px; 
} 
#box2 { 
    width: 100%; 
    display: block; 
    position: relative; 
    border-bottom: 1px solid rgb(170,170,170); 
} 
#container { 
    height: 50px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#list1 { 
    width: 100%; 
} 
#list1 ul { 
    margin: 0; 
    padding: 0px; 
    list-style-type: none; 
} 
#list1 li { 
    cursor: default; 
    padding: 2px; 
} 
.selected { 
    background: rgb(228,228,228); 
} 
</style> 

<script type="text/javascript"> 
window.onload = function() { 

refresh_list() 

} 

function refresh_list() { 

    $('#list1 ul li').click(function() { 
     $('#list1 ul li').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

} 
function add_item_to_list() { 
    $("#list1 ul").append('<li>'+ document.getElementById('refdocs').value +'</li>') 
    document.getElementById('refdocs').value = "" 
    $('#container').scrollTop($('#container')[0].scrollHeight); 
    refresh_list() 
} 
function items_2_var() { 

} 
function var_2_items() { 

} 
</script> 

</head> 

<body> 

<div id="box1"> 
<div id="box2"><input type="text" id="refdocs"></div> 
<div id="container"> 
    <div id="list1"> 
     <ul> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
     </ul> 
    </div> 
</div> 
</div> 
<input type="button" value="add" onclick="add_item_to_list()"> 
<input type="button" value="items_2_var" onclick="items_2_var()"> 
<input type="button" value="var_2_items" onclick="var_2_items()"> 

</body> 

</html>

来源

2014-03-31 user1451890

我可以问你想要解决什么问题吗？因为你所描述或要求的内容相对简单但最终毫无意义（为什么只列出一个列表来重新组合它？），这是你的问题，还是这是对你的实际问题的尝试解决方案的问题？ –

Dave，我不想最终安装冗长的框架来设计一个选择框，这在其他浏览器中很难呈现。因为我可以用DIV做更多的事情，所以我想知道为什么不去制作自定义列表框。 – user1451890

那么，应该点击哪个按钮来创建逗号分隔的列表，并且应该单击哪个按钮以从CSV重新创建列表？我意识到你已经接受了一个答案，但是对于你想要达到的目标来说这很复杂，尤其是在jQuery可用的情况下。 –

$("#var_2_items").click(function() { 
     var x = "apple,oranges,grape fruit,pears,kiwi,mango,bananas"; 
     var arr = x.split(','); 
     for(var i =0 ; i<=arr.length-1 ; i++){ 
     $("#list1 ul").append('<li>'+arr[i]+'</li>'); 
     $("#list1 ul").css("list-style-type","none") 
    } 
    }); 

    $("#items_2_var").click(function() { 
     var x = ""; 
     var listItems = $("#list1 ul li"); 
     listItems.each(function(idx, li) { 
      x += $(li).text() + ","; 
     }); 

    x = x.substring(0, x.length - 1); // remove the last char in your case the , 

    }); 

    <input type="button" value="items_2_var" id="items_2_var"> 
    <input type="button" id="var_2_items" value = "var_2_items">

只要给上面的ID。我测试了这个，它的工作原理

来源

2014-03-31 18:07:03 pj013

与您的var_2_items，我只得到普通数字。任何原因？ – user1451890

与你的项目2 var，我得到的对象不支持属性或方法“children”（IE10） – user1451890

现在怎么样？ – pj013

将UL LI项目转换为变量，然后将变量从变量转换回UL LI项目

回答

相关问题