Question

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

这样做的目的是，用户输入他们当天可用的货车数量，然后拖放每辆货车下的每个货物。然后，用户将单击创建dropheet，它将仅在指定的面包车中打印这些项目的PDF。

现在我只需要创建dropheet来提醒数据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'));
    });
  });

Answer 1

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

Answer 2

您的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(..... li内没有ul个标记。这里<ul id="sortable2" class="droptrue c-white bg-gray"></ul>不确定这是否是故意的。只是指出。

从动态内容中获取LI数据ID

2 个答案: