從動態內容獲取LI數據ID

我想獲取最接近的UL元素，然後LI數據ID，但該按鈕什麼也沒有，沒有錯誤，這表明它沒有找到元素。從動態內容獲取LI數據ID

這樣做的目的是用戶輸入他們當天可用的貨車數量，然後拖放每輛貨車下的每個貨物。然後，用戶將點擊創建投票表單，並且只會在指定麪包車上打印這些項目的PDF。

現在我只需要創建dropices來提醒數據ID，以便我可以將它們傳遞給AJAX。

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

所以我需要以下部分工作時，李從sortable1拖到sortable2。

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

來源

2016-04-05 Sickaaron

什麼是'.dropsheet'？似乎有一些代碼缺失。這也將有助於很多人看到在http://jsfiddle.net –

中的問題的工作示例其位於函數vansDo中的$（「＃placeVans」）。html（）中的href類 – Sickaaron

您a元素，即：按鈕是不是你的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>不知道這是故意的。只是指出。

來源

2016-04-05 07:55:42

li標籤是可排序的1.用戶從可排序的1拖到可排序的2.因此，在可排序的2中是我需要數據的地方。但是你的代碼很好用！謝謝 – Sickaaron

如果這有助於您解決問題，請將其標記爲答案。 –

的ul不是button的祖先，相反，它是同級所以

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

來源

2016-04-05 07:51:26

這個很棒！謝謝。你和@reddy代碼都可以工作。 – Sickaaron

從動態內容獲取LI數據ID

回答

相關問題