Hide DOM object in jquery but determined by other object

how best to use jQuery to cause this link with class: "morelink_L3" to be hidden if the div that contains this text: "We understand things..." is less than 550 characters ?

The fact that this div has no class or id makes it tricky for me - there is option of using "find() but that didnt work when i used it.

this is what i tried:
if($(".story_L3 > div").text().trim().length < 550)
{
$('.morelink_L3').hide();
}


this is the html with problem:







Section Description

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>
<span class="morelink_L3">Read More</span>
</div>
</div>

2 Answers
2

You can use :eq() to target an element by its index in its parent. In this case the second div would be :eq(1). Try this:

:eq()

div

:eq(1)

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

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js








Section Description

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>
<span class="morelink_L3" value="True">Read More</span>
</div>
</div>

Also note that you could use a single call to toggle() providing the boolean condition to hide/show the relevant element:

toggle()

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


You should use filter()

filter()

$(".story_L3").filter(function() {
return $(this).children('div').text().trim().length < 550
}).next('.morelink_L3').hide();

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js








Section Description

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>
<span class="morelink_L3" value="True">Read More</span>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.