将文本放在另一个元素上方的元素内

Question

我有下面的代码，该代码在其中呈现一个带有一些信息的盒子。我需要获取按钮上方的一些div文本，用户将单击该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元素的最近父级。这样，在您的示例中使用HTML即可使用closest('.row')。

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

$(".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的无关部分以使其更短。