Question

我如何将所有UL LI列表项存储到逗号分隔变量中，然后将逗号分隔变量反馈到我的UL LI列表中。接受使用jQuery。

示例＃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>

Answer 1

    $("#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">

如上所述给ids。我测试了它并且它可以工作

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

1 个答案: