使用 jquery 排序后获取第一个 child <div> class 名称

Question

我想在单击按钮后获取第一个 child div 的 class 名称（不是所有 div class 名称） .

但我对此印象深刻。

我尝试了以下方法。

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

我当前的代码给了我所有的 child div class 名字。

我想要的输出是：

["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"]

如何得到我想要的结果？

Answer 1

试试这个：

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

使用 * 获取与 "test"

相似的子串 class 名称

$(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);
});

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

使用 jquery 排序后获取第一个 child <div> class 名称

Get the first child <div> class name after sortable using jquery

html

javascript

jquery

jquery-ui

jquery-ui-sortable