Преобразование элементов UL LI в переменную, а затем из переменной обратно в элементы UL LI

Question

Преобразование элементов UL LI в переменную, а затем из переменной обратно в элементы UL LI

0

Как бы я хотел сохранить все мои элементы списка 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>

user1451890 31 март 2014, в 20:22

Источник

2

Могу я спросить, какую проблему вы пытаетесь решить? Потому что то, что вы описали или попросили, относительно просто, но в конечном счете бессмысленно (зачем разбирать список только для его повторной сборки?), Так это ваша проблема, или это проблема с попыткой решения вашей реальной проблемы?
David Thomas 31 март 2014, в 18:53
0

Дэйв, я не хотел заканчивать тем, что устанавливал длинные рамки для стилизации блока выбора, который трудно рендерить в других браузерах. Так как я могу сделать гораздо больше с DIV, я подумаю, почему бы не пойти на это и создать собственный список.
user1451890 31 март 2014, в 20:42
0

Итак, какую кнопку нужно нажать, чтобы создать список, разделенный запятыми, и какую кнопку нужно щелкнуть, чтобы воссоздать список из CSV? Я понимаю, что вы приняли ответ, но это невероятно сложно для того, чего вы хотите достичь, особенно если jQuery доступен.
David Thomas 31 март 2014, в 20:54

Показать ещё 1 комментарий

Теги:

javascript

jquery

html-lists

1 ответ

Ещё вопросы

Могу я спросить, какую проблему вы пытаетесь решить? Потому что то, что вы описали или попросили, относительно просто, но в конечном счете бессмысленно (зачем разбирать список только для его повторной сборки?), Так это ваша проблема, или это проблема с попыткой решения вашей реальной проблемы?
Дэйв, я не хотел заканчивать тем, что устанавливал длинные рамки для стилизации блока выбора, который трудно рендерить в других браузерах. Так как я могу сделать гораздо больше с DIV, я подумаю, почему бы не пойти на это и создать собственный список.
Итак, какую кнопку нужно нажать, чтобы создать список, разделенный запятыми, и какую кнопку нужно щелкнуть, чтобы воссоздать список из CSV? Я понимаю, что вы приняли ответ, но это невероятно сложно для того, чего вы хотите достичь, особенно если jQuery доступен.

pj013 · Accepted Answer · 2014-03-31T15-50-00.000Z

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

Просто укажите идентификаторы, как указано выше. Я тестировал это, и он работает

с вашими var_2_items я получаю только простые числа. Любая причина?
с вашими пунктами 2 вар, я получаю объект не поддерживает свойство или метод "children" (IE10)
items_2_var (), x отображается пустым, а var_2_items является маркированными числами