使用jquery显示上一个元素的html？

Question

我是初学者。我想在单击按钮时显示上一个元素的HTML。

我可以使用outerHTML属性显示按钮的HTML内容。但是当我对当前对象使用prev（）函数时，它显示错误。

function show(currentObject) {
            alert($(currentObject)[0].outerHTML);
        }

上面的代码给出了当前按钮的html内容。 （单击）显示为警报。

但

function show(currentObject) {
            var prevObject = $(currentObject).prev();
            alert($(prevObject)[0].outerHTML);
        }

上面的代码给我错误!!错误：TypeError：$（...）[0]未定义

下面是html

<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12"><p>click below button</p></div>
<div class="col-md-4"><button onclick="show(this)" class="btn btn-primary">Click</button></div>
</div>

有办法做对吗？

Answer 1

如果你想使用纯Javascript使用previousElementSibling

document.getElementById('foo').addEventListener('click', currentObject);

function currentObject() {
  alert(this.parentNode.previousElementSibling.outerHTML);
}

body {
  font: 13px Verdana;
}

<div class="row">
  <div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
  <div class="col-md-12">
    <p>click below button</p>
  </div>
  <div class="col-md-4"><button class="btn btn-primary" id="foo">Click</button></div>
</div>

Answer 2

你可以使用.prev().html()获取前面的元素html，检查下面的更新片段。

alert($('.currentItem').prev().html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">Previous Element</div>
<div class="item1 currentItem">Current Element</div>