Question

我有一个嵌入在多个div中的按钮。当我按下按钮时，我想在其中一个更高级别的div中移动一些html。然而，我似乎无法选择div的内容。

在下面的示例中，我想选择并显示div中的html，其中 classB '属于' classA容器，其中包含按下的按钮。

HTML

<div id="myList">

  <div class="classA">

    <div class="classB">
      <p>content 1</p>
    </div>

    <div class="classC">
      <button class="myButton">
        I am a button
      </button>
    </div>

  </div>


  <div class="classA">

    <div class="classB">
      <p>content 2</p>
    </div>

    <div class="classC">
      <button class="myButton">
        I am a button
      </button>
    </div>

  </div>

</div>

jquery的

$(document).ready(function () {

  $('#myList').on('click','.myButton', function(event){
    alert($(this).parents().parents().html());

    alert($(this).parents().parents('.classB').html());

    alert($(this).closest('.classB').html());
  });

});

和jsfiddle https://jsfiddle.net/6jd0sp1j/18/

第二次和第三次警报一直未定义。

Answer 1

您必须使用$(this).parent().prev().html()

$(this) - 这是点击的按钮。

$(this).parent() - 这将返回按钮的父级，即div.classC

$(this).parent().prev() - 将返回父级的prev元素，即div.classB

示例：

＆＃13;

$(document).ready(function() {
  $('#myList').on('click', '.myButton', function(event) {
    console.log($(this).parent().prev().html());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myList">
  <div class="classA">
    <div class="classB">
      <p>content 1</p>
    </div>
    <div class="classC">
      <button class="myButton">
        I am a button
      </button>
    </div>
  </div>

  <div class="classA">
    <div class="classB">
      <p>content 2</p>
    </div>
    <div class="classC">
      <button class="myButton">
        I am a button
      </button>
    </div>
  </div>
</div>

＆＃13;

注意：在调试中，请使用console.log代替alert

jquery从给定类的最近div获取html

1 个答案: