Скрыть объект DOM в jquery, но определяется другим объектом - PullRequest
Новая
       7

Скрыть объект DOM в jquery, но определяется другим объектом

0 голосов
/ 03 июля 2018

Как я могу использовать jQuery, чтобы скрыть ссылку с классом .morelink_L3, если div, содержащий текст We understand things..., меньше 550 символов?

Тот факт, что этот div не имеет class или id, делает его сложным для меня. Есть вариант использования find(), но он не сработал, когда я его использовал. Вот что я попробовал: 

if ($(".story_L3 > div").text().trim().length < 550) {
  $('.morelink_L3').hide();
}

<div class="row">
  <div  "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Вы должны использовать .filter(), чтобы получить story_L3, соответствующее условию, а затем нацелиться сразу после morelink_L3 брата, используя .next()

И используйте :eq(index) селектор / .eq(index) метод для нацеливания на секунду div

$(".story_L3").filter(function() {
  return $(this).children('div:eq(1)').text().trim().length < 550
}).next('.morelink_L3').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>
0 голосов
/ 03 июля 2018

Вы можете использовать :eq() для нацеливания элемента по его индексу в родительском элементе. В этом случае второй div будет :eq(1). Попробуйте это: 

if ($(".story_L3 > div:eq(1)").text().trim().length < 550) {
  $('.morelink_L3').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div "l3-details">
    <div class="story_L3">
      <div>Section Description</div>
      <div>We understand things change in life and at work and we want to make sure you’re ready for anything. We have a host of information available to help you understand what you need to do and how we can support you through any change.</div>
    </div>
    <span class="morelink_L3" value="True">Read More</span>
  </div>
</div>

Также обратите внимание, что вы можете использовать один вызов toggle(), предоставляющий логическое условие, чтобы скрыть / показать соответствующий элемент: 

$('.morelink_L3').toggle($(".story_L3 > div:eq(1)").text().trim().length > 550);
...