將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項目

回答

相關問題