Question

我正在尝试设置一个变量以匹配最接近的匹配范围内显示的文本。我已经尝试了大约10种不同的方式，当我提醒它时（显示它的内容），它总是显示任何内容，或者显示未定义的内容。

这是html

<div class="list-group-item">
<span class="list-group-item-heading commenter-name">Test Name</span><span class="pull-right"><a id="78564610">Reply</a> <span class="small text-muted">Mar 29 2017, 00:59:57</span></span>
<p class="list-group-item-text">First comment on page.</p>
</div>

这是相关的jQuery（减去on document ready等）

$("a").click(function() {

    var $test = $(this).closest('.commenter-name').text();

alert($test);

我试图让$ test获得带有'commenter-name'类的span的内容 - 所以在这种情况下$ test应设置为“Test Name”;但我总是得到一个空的回答或未定义。

如果我把它改成这样的话

var $test = $(this).closest('span').text();

它显示了CURRENT范围内的所有内容（它会显示<a id="78564610">Reply</a> <span class="small text-muted">Mar 29 2017, 00:59:57</span>），但无论出于何种原因，我都无法引用其中带有名称的其他范围。

上面有几组HTML，但我不明白为什么这一点很重要，因为我一直在尝试最近的，父母，父母，上一页和查找。

Answer 1

$("a").click(function() {

  var $test = $(this).parent().prev('.commenter-name').text();

  alert($test);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item">
  <span class="list-group-item-heading commenter-name">Test Name</span><span class="pull-right"><a id="78564610">Reply</a> <span class="small text-muted">Mar 29 2017, 00:59:57</span></span>
  <p class="list-group-item-text">First comment on page.</p>
</div>

由于目标范围是使用$(this).parent().prev('.commenter-name').text();

的父级

Answer 2

.closest()字面意思不是最接近的。该方法遍历层次结构。因为它不是ANCHOR的父母，所以你没有得到结果;

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

使用

var $test = $(this)
            .closest('.list-group-item') //Target  common parent
            .find('.commenter-name') //target the element
            .text();

$("a").click(function(e) {
  e.preventDefault();
  var $test = $(this).closest('.list-group-item').find('.commenter-name').text();
  console.log($test);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item">
  <span class="list-group-item-heading commenter-name">Test Name</span><span class="pull-right"><a href="#" id="78564610">Reply</a> <span class="small text-muted">Mar 29 2017, 00:59:57</span></span>
  <p class="list-group-item-text">First comment on page.</p>
</div>

Answer 3

使用它。这很有效。

＆＃13;

$("a").click(function() {
	var $test = $(this).closest('.list-group-item')
              .find('.commenter-name').text();
	alert($test);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item">
<span class="list-group-item-heading commenter-name">Test Name</span>

<span class="pull-right">
<br /><a id="78564610">Reply</a><br />

<span class="small text-muted">Mar 29 2017, 00:59:57</span></span>
<p class="list-group-item-text">First comment on page.</p>
</div>

＆＃13;

Jquery - 查找最接近的匹配范围无效

3 个答案: