LIデータIDを動的コンテンツから取得する

Question

私は最も近いUL要素からLIデータIDを取得しようとしていますが、ボタンは何もせず、エラーもなく、要素を見つけられないことを示しています。

この目的は、ユーザが利用可能なバンの数を入力してから、各バンの下で各配信をドラッグアンドドロップすることです。ユーザーはドロップシートの作成をクリックすると、指定されたバンのみでそれらのアイテムのPDFが印刷されます。

今のところ、私はAJAXにデータを渡すことができるように、データIDを警告するための作成用のドロップシートが必要です。

$(function() { 
    $('#vans').on('input', function() { 
    vansDo(); 
    doMap(); 
    }); 

    function vansDo() { 
    var vans = $('#vans').val(); 
    var drops = $("#placeVans").html('<br /><p class="text-center">Drag each booking onto the required vehicle. Move each booking into delivery position. Then print off drop sheets for each vehicle.</p>'); 
    if (vans >= '1') { 
     for (i = 1; i <= vans; i++) { 
     drops = $("#placeVans").html(); 
     $("#placeVans").html(drops + '<div id="van' + i + '" class="col-lg-4"><h3 class="align-center"><i class="fa fa-truck"></i> Van ' + i + '</h3><ul id="sortable2" class="droptrue c-white bg-gray"></ul><a data-toggle="modal" data-id="' + i + '" data-target="#modal-map" class="btn btn-primary m-t-10 m-r-10"><i class="fa fa-map-marker"></i> View Map</a><a class="dropsheet btn btn-primary m-t-10"><i class="fa fa-file-pdf-o"></i> Create Dropsheet</a></div>'); 
     }; 
    } else { 
     $("#placeVans").html(drops_default); 
    } 
    sortinit(); 
    $("#sortable1").html(cache).sortable("refresh"); 
    $("#sortable2").disableSelection(); 
    } 

    $('#placeVans').on('click', '.dropsheet', function() { 
    $(this).closest('ul').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 
}); 

<ul id="sortable1" class="droptrue"> 
    <li data-id="1" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">1</li> 
    <li data-id="2" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">2</li> 
    <li data-id="3" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">3</li> 
    <li data-id="4" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">4</li> 
</ul> 


<div id="placeVans" class="row m-b-20"></div> 

ので、私は仕事に以下の部分を必要とし、LIはsortable2にsortable1からドラッグされます。

$('#placeVans').on('click', '.dropsheet', function() { 
    $(this).closest('ul').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 

Answer 1

あなたa要素の兄弟である、buttonの祖先ではありません：ボタンは、あなたのulタグ内ではありません。したがって、$(this).closest('ul')は機能しません。しかし、ulはaタグと同じ親の下にラップされていますので、これを行うことができます。

$('#placeVans').on('click', '.dropsheet', function() { 
    $(this).parent().find('ul.droptrue').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 

この部分の変更は$(this).parent().find('ul.droptrue')です。

あなたのコードからも取ってください。 $("#placeVans").html(.....ulの中にliタグがありません。ここに<ul id="sortable2" class="droptrue c-white bg-gray"></ul>これが意図的なのかどうかわかりません。ちょうど指摘する。

Answer 2

ul代わりに、それはつまりそう

$('#placeVans').on('click', '.dropsheet', function() { 
    //$(this).closest('div').find('ul li').each(function() {}) 
    $(this).siblings('ul').find('li').each(function() { 
     alert($(this).data('id')) 
    }) 
    });