使用 jquery 排序后获取第一个子 <div> 类名答案

【问题标题】：Get the first child <div> class name after sortable using jquery使用 jquery 排序后获取第一个子 <div> 类名
【发布时间】：2016-05-25 13:11:09
【问题描述】：

我喜欢在单击按钮后获取第一个子 div 的类名（不是所有 div 类名）。

但我对此感到震惊。

我已经尝试了以下方法。

HTML：

<div id="container">
    <div class="test_1">
        Test 1
        <div class="sub_1"></div>
    </div>
    <div class="test_2">
        Test 2
        <div class="sub_2"></div>
    </div>
    <div class="test_3">
        Test 3
        <div class="sub_3"></div>
    </div>
    <div class="test_4">
        Test 4
        <div class="sub_4"></div>
    </div>
    <div class="test_5">
        Test 5
        <div class="sub_5"></div>
    </div>
    <div class="test_6">
        Test 6
        <div class="sub_6"></div>
    </div>
</div>
<div id="target">
    Click Me
</div>

脚本：

$(function(){
    $( "#container" ).sortable();
    $( "#container" ).disableSelection();
});  

var arr = new Array();
    $( "div#target" ).click(function() {
        $('div', $('div#container')).each(function() {
            arr.push($(this).attr('class'));
        });
        console.log(arr);
        $.ajax({
            type: "POST",
            url: "test.php",
            success: function(data) {
                window.location.href = 'test.php?data='+arr
            },
        });
    });

JSFIDDLE

我的当前代码给了我所有子 div 类的名称。

我想要的输出是：

["test_2 ui-sortable-handle",

"test_1 ui-sortable-handle",

"test_4 ui-sortable-handle",

"test_3 ui-sortable-handle",

"test_6 ui-sortable-handle",

"test_5 ui-sortable-handle"],

但我目前得到以下输出

["test_2 ui-sortable-handle", "sub_2", "test_1 ui-sortable-handle", “sub_1”、“test_4 ui-sortable-handle”、“sub_4”、“test_3 ui-sortable-handle", "sub_3", "test_6 ui-sortable-handle", "sub_6", “test_5 ui-sortable-handle”，“sub_5”，“test_2 ui-sortable-handle”， “sub_2”、“test_1 ui-sortable-handle”、“sub_1”、“test_4 ui-sortable-handle", "sub_4", "test_3 ui-sortable-handle", "sub_3", “test_6 ui-sortable-handle”，“sub_6”，“test_5 ui-sortable-handle”， "sub_5"]

如何得到我想要的结果？

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

试试这个：

演示：https://jsfiddle.net/r539cuw2/

使用 * 获取与“test”相似的子字符串类名

$(function(){
            $( "#container" ).sortable();
            $( "#container" ).disableSelection();
});

var arr = new Array();
$( "div#target" ).click(function() {
    $( "div[class*='test']" ).each(function() { // use * to get simir sub-string class name with "test"
        arr.push($(this).attr('class'));
    });
    console.log(arr);
});

【讨论】：

【解决方案2】：

你可以使用children()函数。

Demo

$(function(){
            $( "#container" ).sortable();
            $( "#container" ).disableSelection();
});

var arr = new Array();     

$("div#target").click(function() {
    $('div#container').children().each(function() {
        arr.push($(this).attr('class'));
    });
    console.log(arr);
});

（或）

   $("div#target").click(function() {
    var arr = $('div#container').children().map(function() {
        return $(this).attr('class');
    }).get();
    console.log("arr", arr);
});

【讨论】：