获取LI数据ID's来自动态内容

Get LI Data ID's from Dynamic Content

本文关键字：动态 数据 LI ID 获取      更新时间：2023-12-21

我试图获得最接近的UL元素，然后是LI数据id，但按钮什么也没做，没有错误，这表明它找不到元素。

这样做的目的是，用户输入当天可用的货车数量，然后在每辆货车下拖放每次送货。然后，用户将点击创建投递单，它将只打印指定货车中这些物品的PDF。

现在我只需要创建dropsheet来提醒数据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>

所以我需要以下部分来工作，LI从sortable1拖到sortable2。

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

您的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'));
    });
  });

变化在该部分CCD_ 6中。

也从你的代码中提取。$("#placeVans").html(.....您的ul中没有li标签。此处<ul id="sortable2" class="droptrue c-white bg-gray"></ul>不确定这是否是故意的。只是指出。

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'))
    })
  });
相关文章：