jQuery：检索嵌套 div 元素的 ID

Question

我正在使用可排序的 jQuery UI 对页面中的列表元素进行排序。排序后，我想获取按钮的 ID。截至目前，我能够捕获列表中的<div> 元素。但是，我想获得具有class='buttonData' 的按钮的 ID。我在下面粘贴了示例 HTML、CSS 和 jQuery 代码以供参考。谢谢。

 $(".multipleButtons").sortable({
                connectWith: '.multipleButtons',
                stop: function (ev, ui) {
                    var hasLooped = false;
                    var list = $(ui.item).parent().find(".adminMenuButton").each(function (index) {
                        if (!hasLooped) {
                            console.log(ui.item[0]);
                            console.log(ui.item[0].nextElementSibling);
                            console.log(ui.item[0].previousElementSibling);
                            hasLooped = true;
                        }
                    })
                }
            }).disableSelection();
        }

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">  
    .landingmenu > ul > fieldset {
        width: 100%;
    }
</style>

 <div class="landingmenu">
      @Html.HiddenFor(model => model.Groups[i].Id, new { @class = "adminMenuGroupId" })
      <div class="btn-group multipleButtons">
      @for (int x = 0; x < Model.Groups[i].Buttons.Count; x++)
      {
    <div class="landingmenu btn-group">
       <a href="@Model.Groups[i].Buttons[x].URL" target="@(Model.Groups[i].Buttons[x].OpensInNewWindow ? "_blank" : "_self" )" class="adminMenuButton buttonData btn btn-default talent-solid-btn buttonspace">@Model.Groups[i].Buttons[x].Name</a>
    @if (ViewBag.IsSiteAdmin)
    {
     <div id="grp-@Model.Groups[i].Id:btn-@Model.Groups[i].Buttons[x].Id" class="buttonData">
    </div>
      btnId++;
      }                                                    
    </div>
    }
   </div> 
</div>

下面是我浏览器中的console.log，突出显示的是我要捕获的ID。

Answer 1

如果我理解，您有一个外部 div 和该 div 内的一些按钮。您想要这些按钮的 id 列表。我认为这会解决你的问题：

<div id="outerdiv">
<div class="buttonData" id="test1">Test </div>
<div class="buttonData" id="test2">Test </div>
<div class="buttonData2" id="test3">Test</div>
<div class="buttonData" id="test4">Test</div>  
</div>

JavaScript

var arr = [];
$("#outerdiv > div.buttonData").each(function(){
    arr.push(this.id);
   alert(this.id);
})

这里也是一个 jsfiddle 演示：https://jsfiddle.net/m1xorfw7/1/