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>

jQuery最接近H2值？

2 个答案: