If P tag is display:none; Javascript

Question

I have the following...

 $(document).ready(function() {
        $('p:contains("You")').parent('span').prev('input').addClass('error');
  });

My function works fine given that it adds the class to the correct inputs but it should only add the class if the paragraph containing 'you' is display:inline.

Has anybody any idea of how I can do this?

My markup for each input is similar to this....

<li class="yourdetli">
    <label class="yourdet">House Number</label>
    <input type="text" id="ctl00_ContentPlaceHolder1_TB_HNumber2" name="ctl00$ContentPlaceHolder1$TB_HNumber2">
    <span style="color: Red; display: none;" class="errorp" id="ctl00_ContentPlaceHolder1_RequiredFieldValidator9">
        <p>You must complete this field</p>
    </span>
 </li>

I suspect you're traversing the DOM incorrectly. Can you provide the HTML? — Blazemonger
– Blazemonger, Commented Oct 24, 2011 at 15:02
It seems to be working fine, but for somereason its picking up the 'p' has 'You' in the content despite the display being set to none? — Liam
– Liam, Commented Oct 24, 2011 at 15:14
Your input is invalid. You can't put a <p> inside a <span>. — Quentin
– Quentin, Commented Oct 24, 2011 at 15:58

Nicola Peluchetti · Accepted Answer · 2011-10-24 15:01:26Z

2

You could use filter() and check the display property:

 $(document).ready(function() {
        $('p:contains("You")').filter(function(){
                               return $(this).css('display') === 'inline';
                               })
                               .parent('span')
                               .prev('input')
                               .addClass('error');
  });

filter keeps the element if the function returns true

answered Oct 24, 2011 at 15:01

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

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

Comments

John Strickler · Accepted Answer · 2011-10-24 15:01:36Z

1

$('p:contains("You"):visible')

Assuming you aren't changing the display on your paragraphs anywhere in the document.

answered Oct 24, 2011 at 15:01

John Strickler

25.4k6 gold badges55 silver badges70 bronze badges

2 Comments

Nicola Peluchetti Over a year ago

Visible is different from having display:inline

John Strickler Over a year ago

Yep, I'm just going off of his title.

kylewelsby · Accepted Answer · 2011-10-24 15:04:16Z

1

You may want to try collecting all <p> tags that contain you and loop though all of them with a if statement.

If css display is inline then add error to input.

This may help

$(document).ready(function(){
  $("p:contains('you')").each(function(){
    if($(this).css('display') === 'inline'){
      $(this).parent('span').prev(':input').addClass('error');
    }
  });
});

answered Oct 24, 2011 at 15:04

kylewelsby

4,1192 gold badges31 silver badges35 bronze badges

Comments

Yogurt The Wise · Accepted Answer · 2011-10-24 15:05:24Z

0

:contains is case sensitive. "You" Not sure if that is the problem.

answered Oct 24, 2011 at 15:05

Yogurt The Wise

4,4995 gold badges36 silver badges43 bronze badges

1 Comment

Yogurt The Wise Over a year ago

if (str.toLowerCase().indexOf("yes") >= 0) To also look for a sub string.

Collectives™ on Stack Overflow

If P tag is display:none; Javascript

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related