Question

我有一个如下所示的html结构，这就是选项列表

<div class='col-sm-4'>
        <div id='selectiondata' class="panel panel-default">
            <div class="panel-body">
                <h2 class='headerText'>Selections</h2>
                <p style="font-size: 14px;">Select only that apply to you.</p>
                <ul>
                    <li id="item1" data-cat="fruits">Banana</li>
                    <li id="item2" data-cat="fruits">Pineapple</li>
                    <li id="item3" data-cat="fruits">Oragne</li>
                    <li id="item4" data-cat="fruits">MAngo</li>   
                    <li id="item5" data-cat="Vegetables">Beans</li>
                    <li id="item6" data-cat="fruits">jackfruit</li>
                    <li id="item7" data-cat="Vegetables">carrot</li>
                </ul>
            </div>
        </div>
    </div>

当用户点击它时，从上面的div移动到相邻的div，这有一个如下所示的结构。

 <div id="categories" class="panel-default">
                <div class="panel-body">
                    <div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
                    <h2 class='headerText'>Categories</h2>
                    <ul>
                        <li id="cat-fruits">
                            <span>fruits</span>
                            <ul>
                                <li id="item5" data-cat="fruits">MAngo</li>
                                <li id="item1" data-cat="fruits">Banana</li>
                                <li id="item3" data-cat="fruits">Oragne</li>
                                <li class="no-expenses" style="display: none;">No items selected</li>
                            </ul>
                        </li>
                        <li id="cat-Vegetables">
                            <span>Vegetables</span>
                            <ul>
                                <li id="item4" data-cat="Vegetables">Beans</li> 
                                <li class="no-expenses" style="display: none;">No items selected</li>
                            </ul>
                        </li>
                        <li id="cat-dolls">
                            <span>dolls</span>
                            <ul>
                                <li class="no-expenses">No items selected</li>
                            </ul>
                        </li>
                        <li id="cat-medical">
                            <span>Medical</span>
                            <ul>
                                <li class="no-expenses">No items selected</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

用于获取数据数组的jquery函数

    function saveData() {
    userData = [];
    $('#categories ul li ul li.selected').each(function(index, element) {
        if ($.inArray($(this).text(), userData) < 0) {
            userData.push($(this).html());
        }
    });

我想获取像

这样的数据

 [MAngo,banana,Oragne,beans]

这里我将有两个div，一个div显示选择列表，如下图所示，当用户点击特定的elemnet时，elemnet将被移动到下一个相邻的div（类别）。我想获得这个数据。

-----------   ----------
|Banana    |  | MAngo   |  
|Pineapple |  | Banana  |  
|Oragne    |  | Oragne  |  
|MAngo     |  | Beans   |  
|Beans     |  |_________|
|jackfruit |
|carrot    |
-----------

上面使用的jquery没有从html中获取任何数据，我怎么能实现这一点。请帮帮我。

Answer 1

单击该项目时是否更容易将每个项目添加到数组中（并且在数组中尚不存在）？

var arr = [];
$("#categories [id^=item]").click(function() {
   if(arr.indexOf($(this).html())<0) arr.push($(this).html());
})
console.log(arr);

Answer 2

如果要在@nicael代码中使用数据attr

var arr = [];
$("#categories").data("cat").each(function() {
  arr.push($(this).html());
})
console.log(arr);

Answer 3

＆＃13;

var arr = [];

$('li[data-cat]').each(function() {
  arr.push($(this).html());
});

console.log(arr);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="categories" class="panel-default">
    <div class="panel-body">
        <div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
        <h2 class='headerText'>Categories</h2>
        <ul>
            <li id="cat-fruits">
                <span>fruits</span>
                <ul>
                    <li id="item1" data-cat="fruits">Mango</li>
                    <li id="item2" data-cat="fruits">Banana</li>
                    <li id="item3" data-cat="fruits">Oragne</li>
                    <li class="no-expenses" style="display: none;">No items selected</li>
                </ul>
            </li>
            <li id="cat-Vegetables">
                <span>Vegetables</span>
                <ul>
                    <li id="item4" data-cat="Vegetables">Beans</li> 
                    <li class="no-expenses" style="display: none;">No items selected</li>
                </ul>
            </li>
            <li id="cat-dolls">
                <span>dolls</span>
                <ul>
                    <li class="no-expenses">No items selected</li>
                </ul>
            </li>
            <li id="cat-medical">
                <span>Medical</span>
                <ul>
                    <li class="no-expenses">No items selected</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

＆＃13;

获取数据列表并在jquery中存储在数组中

3 个答案: