jQuery：ネストされたdiv要素のIDを取得する

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/