Question

我正在使用jQuery UI排序来对页面中的列表元素进行排序。排序后，我想获得按钮的ID。截至目前，我能够捕获列表中的<div>元素。但是，我想获得ID为class='buttonData'的按钮。我在下面粘贴了示例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/

jQuery：检索嵌套div元素

1 个答案: