获取位于另一个元素上方的元素内的文本

Question

我有下面的代码，它呈现一个盒子，里面有一些信息。我需要获取按钮上方某些 div 的文本，用户将单击这些按钮以获取信息。我不能使用 id，因为页面的其余部分将一次又一次地使用相同的代码和不同的文本。

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade" id="dummy" role="tabpanel" aria-labelledby="tab">
    <div class="bg-light px-3 my-2">                          
        <div class="row align-items-center text-center">
        <div class="col-6 col-sm-4 col-lg-1 my-2">
            <span class="display-4 ws_day"><strong>04</strong></span>
            <br>
            <span class="ws_month"><strong>Jan</strong></span>
        </div>
        <div class="col-6 col-sm-4 col-lg-1 my-2">
            <img src="" />
        </div>
        <div class="col-12 col-sm-4 col-lg-2 my-2">
            <span><strong>Lorem</strong></span>
            <br>
            <span class="ws_time">6pm</span>
            <br>
            <span class="ws_timezone">(GTM+12:00)</span>
        </div>
        <div class="col-12 col-lg-4 my-2">
            <span class="h5 ws_title"><strong>Title</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
            <span><strong>Ipsum</strong></span>
            <br>
            <span><strong>Ipsium</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
            <a class="dec-none" role="button">
                <button class="btn btn-orange buttonClick" style="white-space: normal" data-toggle="modal" data-target="#modal">Button</button>
            </a>
        </div>
        </div>                          
    </div>
    </div>
</div>

jQuery

$(".buttonClick").on("click", function(){
    var title = $(this).closest("div span").find(".ws_title").text());          
 });

我使用 jQuery 文档尝试了多种组合，但没有成功。

有没有可能实现我所需要的？

Answer 1

除了JS中多出的)导致语法错误外，问题出在closest('div span')。您需要为 closest() 提供一个选择器，它是 both 元素的最近父级。因此 closest('.row') 将起作用，给定您示例中的 HTML。

另请注意，您不能在 HTML 中嵌套可点击元素，因为它是无效的。因此，我删除了包裹 button 的 a。

$(".buttonClick").on("click", function() {
  var title = $(this).closest(".row").find(".ws_title").text();
  console.log(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade" id="dummy" role="tabpanel" aria-labelledby="tab">
    <div class="bg-light px-3 my-2">
      <div class="row align-items-center text-center">
        <div class="col-12 col-lg-4 my-2">
          <span class="h5 ws_title"><strong>Title</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
          <button class="btn btn-orange buttonClick" style="white-space: normal" data-toggle="modal" data-target="#modal">Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

我在上面的示例中删除了您 HTML 中不相关的部分以使其更短。

获取位于另一个元素上方的元素内的文本

get the text inside an element above another element

javascript

jquery

html

traversal