Question

我正在尝试使用特定类检索最近的div标记的id。

我目前有

var del = $(this).closest(".column").attr("id");
          console.log(del);

我似乎只收到了未定义的

我也尝试过使用parent()，这会返回相同的结果

以下是使用的完整代码

$(".portlet")
  .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
  .find(".portlet-header")
  .addClass("ui-widget-header ui-corner-all")
  .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'>-</span><span class='ui-icon ui-icon-minusthick portlet-delete'>X</span>");


$(".portlet-toggle").click(function() {
  var icon = $(this);
  icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
  icon.closest(".portlet").find(".portlet-content").toggle();
});




$(".column").on("click", ".portlet-delete", function() {
  $(this).closest('div.portlet').remove();
  var del = $(this).closest(".column").attr("id");
  console.log(del);


});

<div class="column" id="left">

  <div class="portlet" id="widget_1>">
    <div class="portlet-header">Header</div>
    <div class="portlet-content">Content</div>
  </div>

</div>

<div class="column" id="middle">

  <div class="portlet" id="widget_2>">
    <div class="portlet-header">Header</div>
    <div class="portlet-content">Content</div>
  </div>

</div>

<div class="column" id="right">

  <div class="portlet" id="widget_3>">
    <div class="portlet-header">Header</div>
    <div class="portlet-content">Content</div>
  </div>

</div>

Answer 1

您获得undefined的原因是因为您在删除包含.column后尝试查找距离最近的div.portlet。因此，this不再位于DOM中，并且不再存在最近的.column。

切换这两行的顺序，它应该有效。

$(".portlet")
  .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
  .find(".portlet-header")
  .addClass("ui-widget-header ui-corner-all")
  .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'> Toggle </span><span class='ui-icon ui-icon-minusthick portlet-delete'> Del </span>");

$(".portlet-toggle").click(function() {
  var icon = $(this);
  icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
  icon.closest(".portlet").find(".portlet-content").toggle();
});

$(".column").on("click", ".portlet-delete", function() {
  var del = $(this).closest(".column").attr("id");
  console.log(del);
  $(this).closest('div.portlet').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column" id="left">

  <div class="portlet" id="widget_1>">
    <div class="portlet-header">Header 1</div>
    <div class="portlet-content">Content 1</div>
  </div>

</div>

<div class="column" id="middle">

  <div class="portlet" id="widget_2>">
    <div class="portlet-header">Header 2</div>
    <div class="portlet-content">Content 2</div>
  </div>

</div>

<div class="column" id="right">

  <div class="portlet" id="widget_3>">
    <div class="portlet-header">Header 3</div>
    <div class="portlet-content">Content 3</div>
  </div>

</div>

Answer 2

我认为你的问题是＆＃39;这个＆＃39;不属于＆＃39; .column＆＃39;所以函数找不到匹配的元素。另一个问题可能是＆＃39; .column＆＃39;没有id attr。

<div class="column" id="test"><div class="inner"></div></div>

var del = $('.inner').closest(".column").attr("id");
console.log(del); // => test

Answer 3

试试这个：

http://jsfiddle.net/Leer6y6o/

您必须确保您尝试找到最接近的项目正在包装正在调用的元素。

<div class="column" id="test">
<button>
    Test
</button>
    </div>

$("button").click(function()
{
   var d = $(this).closest(".column").attr("id");
      alert(d);
});

Jquery找到最近的div类并获取其ID

3 个答案: