初学者求助：jQuery点击按钮显示前一个元素HTML报错，求正确实现

首先得帮你理清问题出在哪：你用$(currentObject).prev()的时候，其实是在找按钮元素本身的直接前一个同级元素，但看你的HTML结构，按钮是它所在<div class="col-md-4">里的唯一子元素，根本没有同级的前元素，所以这个jQuery调用返回的是空集合，你再去访问[0]自然就会出现undefined的报错。

正确的实现思路 #

你真正想要的应该是按钮所在父容器的前一个兄弟元素（比如那个包含<p>click below button</p>的div，或者更前面的带链接的div），所以需要先定位到按钮的父元素，再去查找父元素的前一个兄弟。

代码示例 #

1. 显示按钮父容器的直接前一个兄弟元素的HTML

function show(currentObject) {
  // 先获取按钮的父元素，再找父元素的前一个兄弟
  var prevContainer = $(currentObject).parent().prev();
  // 先判断是否找到元素，避免报错
  if (prevContainer.length > 0) {
    alert(prevContainer[0].outerHTML);
  } else {
    alert("未找到对应的前一个元素");
  }
}

2. 如果要显示最前面那个带链接的div的HTML

如果你想获取的是更前面的<div class="col-md-12">（包含<a>标签的那个），可以用prevAll()结合筛选：

function show(currentObject) {
  // 找到父元素的所有前兄弟中，包含.navbar-link的那个div
  var targetElement = $(currentObject).parent().prevAll('.col-md-12:has(.navbar-link)').first();
  if (targetElement.length > 0) {
    alert(targetElement[0].outerHTML);
  } else {
    alert("未找到目标元素");
  }
}

额外提示 #

以后处理jQuery元素的时候，养成先判断length属性的习惯，这样可以避免因为找不到元素而抛出类似的TypeError，让代码更健壮。

内容的提问来源于stack exchange，提问作者Thomas Martin