获取 div 父项的父项

Question

我已经搜索并尝试了很多方法来做到这一点，例如 closest() 和 parents() 以及 parent() 和 find() 但我根本无法让它工作。

我有这个html

<div  class='message_holder area2 user45 chatid32'>
    <a class='avatar' title='jhon'>
       <img height='28px' width = '28px' src="link to image" />
    </a>
 <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
 </div>
 <div class='message user_chat'> hghgghgh</div>
 <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'></div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'></div>
    <div class="like">
        <div class="editpng"></div>
        <div class="deletepng"></div>
    </div>
 </div>
</div>

所以我想要的是当我点击 div class deletepng 我想删除两个 divs unlikepng 和 likepng.

这个js

 $(document).on ("click", ".deletepng", function () {
      $this = $(this);
     //alert( $this.closest(".like").html());  I could just make this to work
     // alert( $this.parents(".like_holder").html());  wont work
     // alert( $this.closest(".like_holder").html());  wont work
     // alert( $this.parent().parent().html());  wont work
     // alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
 });

我只是想知道为什么他们不工作我的努力。哪里可能是我的错误？

编辑：

我不知道这是否有作用，我有我在对话框中尝试过的那样

 $(document).on ("click", ".deletepng", function () { 
 $this = $(this);
 $('<div>' + c_delete + '</div>').dialog({
  resizable: false,
  buttons: {
    "Yes": function() {
      chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
      $(this).dialog("close");

      //alert( $this.closest(".like").html());  I could just make this to work
      // alert( $this.parents(".like_holder").html());  wont work
      // alert( $this.closest(".like_holder").html());  wont work
      // alert( $this.parent().parent().html());  wont work
      // alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
    }
  }
});
});

Answer 1

$this.closest(".like").html(); => 这将是父 div 的 return HTML，删除按钮所在的位置。不删除元素

$this.parents(".like_holder").html() => 这将 return html 个 div.message_holder。不删除元素。

$this.closest(".like_holder").html() => 这将 return html of div.like_holder $this.parent().parent().html(); 已经很近了，但仍然很远 => html of div.like_holder $this.closest(".like_holder").find(".like_holder").html(); return null => 在 div.like_holder 中没有 class like_holder 的子元素。

样例

$(document).on ("click", ".deletepng", function () {
      var $parent = $(this).parent().parent();
       $parent.find('.likepng').remove();
       $parent.find('.unlikepng').remove();
     
 });

.deletepng{
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class='message_holder area2 user45 chatid32'>
    <a class='avatar' title='jhon'>
       <img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
    </a>
 <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
 </div>
 <div class='message user_chat'> hghgghgh</div>
 <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'> like me</div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'> unlike me</div>
    <div class="like">
        <div class="editpng"></div>
        <div class="deletepng">delete button</div>
    </div>
 </div>
</div>

更新

如果你想从对话框或其他东西创建它 - 你不能使用 this 变量。这没有任何意义。您应该向 message_box 提供 unique id 然后使用它，例如 $(id_of_message_box).find('.likepng, .unlikepng').remove()

或者我从你的代码中可以看出：

   var $parent = $this.parent().parent();
       $parent.find('.likepng, .unlikepng').remove();

这意味着你应该在你的函数中使用 $this 而不是 $(this)

Answer 2

您可以像这样访问您的 $(this) 的 parents parent：

var likeholder;

likeholder = $(this).parent().parent();

然而，这通常是不明智的。不过你会有 jquery object。

告诉我你过得怎么样

Answer 3

使用 closest 然后使用第二个参数作为上下文。

$(document).on("click", ".deletepng", function() {
  var $holder = $(this).closest('.like_holder');
  $('.likepng, .unlikepng', $holder).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
  <a class='avatar' title='jhon'>
    <img height='28px' width='28px' src="link to image" />
  </a>
  <div class='flag_holder'>
    <div class='edited  png32'></div>
    <div class='  png32'></div>
  </div>
  <div class='message user_chat'>hghgghgh</div>
  <div class='like_holder'>
    <div class='chattime'>02-12 22:16</div>
    <div class='likepng'>like</div>
    <div class='likescore'>5</div>
    <div class='unlikescore'>0</div>
    <div class='unlikepng'>unlike</div>
    <div class="like">
      <div class="editpng"></div>
      <div class="deletepng">delete</div>
    </div>
  </div>
</div>

编辑

自从您更新后，您需要设置一个全局变量来记住 $this 或 container/holder。试试这个：-

var $holder;

$(document).on("click", ".deletepng", function() {

  $holder = $(this).closest('.like_holder');

  $('<div>' + c_delete + '</div>').dialog({
    resizable: false,
    buttons: {
      "Yes": function() {
        chat_text_h.html('<div class="removed"> Removed</div>');
        $(this).dialog("close");

        $('.likepng, .unlikepng', $holder).remove();
      }
    }
  });
});

Answer 4

试试这个，你需要 parent;

的兄弟姐妹

alert( $this.closest(".like").parent().find(".unlikescore").html()); 
alert ($this.closest('.like').siblings('.unlikepng').html()) ;

工作js fiddle

Answer 5

为了 select 一个元素的父元素的父元素，你试试这个：

$(document).on ("click", ".deletepng", function () {


     alert( $($(this).parent()).parent().html());

 });

因为你只能在 Jquery 对象上执行 parent() 方法。这是一个与您的代码无关的示例。 JSFiddle。

获取 div 父项的父项

Get parent of the parent of div

html

javascript

jquery

parent