получить текст внутри элемента над другим элементом - PullRequest
Новая
       8

получить текст внутри элемента над другим элементом

1 голос
/ 16 января 2020

У меня есть код ниже, который отображает коробку с некоторой информацией внутри. Мне нужно получить текст некоторых элементов над кнопкой, на которую пользователь нажмет, чтобы получить информацию. Я не могу использовать идентификаторы, поскольку остальная часть страницы будет снова и снова иметь один и тот же код с другим текстом. 

<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, но безуспешно.

Можно ли даже добиться того, что мне нужно?

1 Ответ

1 голос
/ 16 января 2020

Помимо дополнительных ) в JS, вызывающих синтаксическую ошибку, проблема связана с closest('div span'). Вам нужно задать селектор для closest(), который является ближайшим родителем для обоих элементов. Таким образом, closest('.row') будет работать, учитывая HTML в вашем примере.

Также обратите внимание, что вы не можете вкладывать кликабельные элементы в 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 в приведенном выше примере, чтобы сделать его короче.

...