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>

SCRIPT：

$(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”]

如何获得我想要的结果？

Answer 1

试试这个：

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

使用*来获得类似的子字符串类名称＆＃34; test＆＃34;

$(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进行排序后获取第一个子<div>类名

2 个答案: