Only show parent if child contains certain string

[jony]

I have a group of divs that appear on multiple pages, that have this pattern:

http://codepen.io/jonymtl/pen/bpamgV

This group appears on multiple pages.

My ideal javascript/jquery solution is something like this:

1. hide all div class=”fs-entry-container”
2. if child div class=”fs-detail-title” contains #something, change parent div class=”fs-entry-container” to display:block — so that on Page A I can insert this code to only show div class=”fs-entry-container” with #sts_com__01js, on Page B only show #sts_com__01gm etc. etc.

[Shikkediel]

This should be a start with some jQuery :

$('.fs-entry-container').hide().each(function() {

  var text = $(this).find('.fs-detail-title:contains("01gm")');

  if (text.length) $(this).show();
});

codepen.io/anon/pen/yOpmGY

[Beverleyh]

And a plain JS alternative in case you’re not already using jQuery and want something lightweight http://jsbin.com/yemaqorase/1/edit?html,js,output

EDIT: Sorry, I misread – I thought it was a ‘hide if empty’ rather than ‘ hide if doesn’t not contain X’. Ho hum – I’ll leave the demo in case it’s useful for other projects, or as a starting point for further adaptations by yourself :)

[Author]

Posts