Using Jquery to hide <p> based on its contents

Question

Im trying to achieve the following:

A certain page will have a series of strings, which are replaced with database content if it exists.
For example:

<h2 class="label">Title:</h2>
<p class="value">{{Title}}</p>

Would become:

<h2 class="label">Title:</h2>
<p class="value">This is the title</p>

The problem is, if the database row for {{Title}} has never been entered, it displays the {{Title}} instead of replacing it with whitespace. So what id like to do is, with jquery, if .value contains {{, hide the whole element, in the same way display:none would.

Is this possible?

Thanks in advance.
Rob

Are you in control of the server-side? Sounds like the server-side logic just needs to be updated. — meder omuraliev
– meder omuraliev, Commented Oct 5, 2009 at 9:29
+1 with meder. If you do this with jQuery it will be visible for an instant. Better not showing it in first place using server-side processing. — MaLKaV_eS
– MaLKaV_eS, Commented Oct 5, 2009 at 9:32
The server side is a in house developed php CMS, unfortunately I'm not experienced enough in php (nor is time at an advantage at the moment) to tackle it there, although I do agree its how it should be resolved. I managed to fix another similar issue with jquery with the help of stackoverflow members a few months ago and although its a bit of a botch, it keeps the users happy while we figure out a long term solution, like moving the content over to a backend that we can actually manage :) — prevailrob
– prevailrob, Commented Oct 5, 2009 at 9:35

cllpse · Accepted Answer · 2009-10-05 09:43:27Z

6

$(function () // when DOM is ready for manipulation, do:
{
    // for each of the p-elements in the DOM (add your own context or class-scope
    // or whatever you can do to narrow down the list of elements here):
    $("p").each(function () 
    {
        // cache the element (always a good idea when doing multiple operations
        // on the same entity):
        var that = $(this);

        // if the text of the element is "{{Title}}" then hide the element:
        if (that.text() == "{{Title}}") that.hide();

        // alternatively you can do:

        // if the the characters "{{" exists at any position in the text of the
        // element, hide it:
        if (that.text().indexOf("{{") > -1) that.hide();
    });
});

edited Oct 5, 2009 at 9:43

answered Oct 5, 2009 at 9:30

cllpse

21.8k37 gold badges134 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cllpse Over a year ago

You are welcome. My code looks a bit bulky, but you have to remember that JavaScript is a horribly slow language, where you really have to optimize for speed. Take [Kobi]'s answer--it is a lot cleaner than mine, but I suspect that it is also a lot slower on large collections.

cllpse Over a year ago

Kobi has run some tests, and his code is about 2 times faster than mine. Even though my answer solved your problem, I suggest you accept his answer over mine, since its a lot slicker :)

Kobi Over a year ago

@roosteronacid - I appreciate the juster, though it is unnecessary. Thanks.

cllpse Over a year ago

Not at all, Kobi. This is about figuring out the best answer to a problem. And yours is the best answer.

cllpse · Accepted Answer · 2009-10-05 22:07:03Z

5

$("p.value:contains('{{')").hide();

Edit:
There's a claim this code is slower. It should be said this is fairly basic, and in fact runs about 3 times faster.
Check this example (first one is slower): http://jsbin.com/ikite

edited Oct 5, 2009 at 22:07

cllpse

21.8k37 gold badges134 silver badges170 bronze badges

answered Oct 5, 2009 at 9:36

Kobi

139k41 gold badges259 silver badges302 bronze badges

12 Comments

cllpse Over a year ago

Nice one. I'm curious though.. what is the performance-hit? It's not the most basic selector :)

Kobi Over a year ago

@roosteronacid - I'd say it's pretty basic, I've done more complex selectors and had no problems.

Kobi Over a year ago

@anonymous downvoder - please explain. The code works, btw: jsbin.com/oquto

cllpse Over a year ago

I'm the one down voting. The selector is very clean and easily readable. But if you we're to run it on a collection of, say, a 100 elements, you would experience rendering-blips.

cllpse Over a year ago

I stand corrected. Although my code runs a bit faster without the 2nd if-clause, your code is still about 2 times faster.

|

MSK · Accepted Answer · 2009-10-05 09:31:44Z

3

Try:

$('p.value').each(function(i,e){
  if ($(e).text().match(/^{{.*}}$/)) {
    $(e).hide();
  }
});

answered Oct 5, 2009 at 9:31

MSK

844 bronze badges

4 Comments

MaLKaV_eS Over a year ago

Just what I was looking for... a pitty I suck at regular expressions

cllpse Over a year ago

-1 I see no need to new up a RegExp object each p-element. You can do this with a simple indexOf or equality-operation.

cllpse Over a year ago

Also, you are not caching anything--if we're talking a large collection of elements, wrapping "this" (or in your case "e") multiple times is quite the performance-hit.

MSK Over a year ago

I second those, wasn't really optimized for performance. I'd go for the simpler indexOf if you don't need to be more valid.

smack0007 · Accepted Answer · 2009-10-05 09:31:30Z

0

Could you not just give the p a class of title?

<h2 class="title label">Title:</h2>
<p class="title value"></p>

And then to hide / show it:

if(title != '')
{
    $('p.title.value').text(title);
}
else
{
    $('.title').hide();
}

answered Oct 5, 2009 at 9:31

smack0007

11.4k8 gold badges45 silver badges48 bronze badges

Collectives™ on Stack Overflow

Using Jquery to hide <p> based on its contents

4 Answers 4

4 Comments

12 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

12 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related