jquery最接近的h2值？

Question

当我点击按钮时，我想要获取h2的值，我所做的是使用一个变量

var getClassName = $(this).closest('div').attr('class'); 

它给了我它的父类，现在我有了想要获取它的h2的父类，所以我尝试了

var getH2Val= $('.'+getClassName+' h2').val(); 

这给了我未定义的价值。

<div id="search-7" class="section-1">
    <h2>Test head</h2>
    <p>test paragraph</p>
    <p><a class="testclass" href="#test2"><button>button</button> </a></p>
</div>

<div id="search-8" class="section-1">
    <h2>Test head</h2>
    <p>test paragraph</p>
    <p><a class="testclass" href="#test2"><button>button</button>    </a></p>
 </div>

Answer 1

您的closest()逻辑是正确的。但是，您需要在该元素中使用find()来检索h2。还要注意的是，h2元素没有‘值’。要检索其中的文本，请使用text()。

最后请注意，不能将button元素放在a中，因为嵌套的可单击元素在HTML中是无效的。因此，我在下面的示例中删除了a元素，因为它不是必需的。

​

$('button').click(function() {
  var h2Text = $(this).closest('div').find('h2').text();
  console.log(h2Text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-7" class="section-1">
  <h2>Test head #1</h2>
  <p>test paragraph</p>
  <p><button>button</button></p>
</div>

<div id="search-8" class="section-1">
  <h2>Test head #2</h2>
  <p>test paragraph</p>
  <p><button>button</button></p>
</div>

​

Answer 2

另一种更类似于您的代码的方法是获取父id属性(因为它们在文档中应该是惟一的)。请注意，在选择器上使用class属性并不能确保匹配唯一的元素。

​

$('button').click(function()
{
    var parentID = $(this).closest('div').attr('id');
    var h2Text = $('#' + parentID + ' h2').text();
    console.log(h2Text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="search-7" class="section-1">
  <h2>Test head #1</h2>
  <p>test paragraph</p>
  <p><button>button</button></p>
</div>

<div id="search-8" class="section-1">
  <h2>Test head #2</h2>
  <p>test paragraph</p>
  <p><button>button</button></p>
</div>

​