javascript - 使用 jquery 获取排序后的第一个子 类名

Question

我喜欢在单击按钮后获取第一个子 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_3ui-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_4ui-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"]

如何得到我想要的结果？

Answer 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);
});