Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 25
  • Last Modified:

jquery selector find p tag in table cell

Hi experts,

I'm using jquery and html

I have this fiddle

http://jsfiddle.net/xdx1bffb/

This question is on using selectors and the jquery .hide method

When you run my current fiddle it looks like this:

my fiddle
If you look at the html that was rendered, on google chrome inspector it looks like this:

 rendered html
If you notice the html code in my fiddle. In Table1 all the table cells use a class called ColStyle.  Only some of the table cells though have another table inside this cell. These are the cells in my picture that show "This is sample text".

This message is contained in a  <p> which is in a table cell.

So now I want to use the jquery .hide()  method to hide some images.

This essentially the criteria to hide the images that i need:

Within the tables cells with this class ColStyle that contain a p tag, hide the image that is inside those cells.
I specifically want to look for the p tag. So any cells with a p tag in it. Hide the image in that cell.

So my desired result should looks like this:

desired result
I started out with this syntax , but not sure about how to then add the part to hide the image.

$('.ColStyle p').hide();

Anyone know the correct syntax?
0
maqskywalker
Asked:
maqskywalker
2 Solutions
 
Miguel OzSoftware EngineerCommented:
A possible solution using the has method:
//find all td that has ColStyle and p 
var $target = $('td.ColStyle').has('p');
if ($target.length > 0){
	//if found then hide the link
	$target.children('a').hide();	
}

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
My first reaction to all this is why? Why all the effort to reverse engineer the source code? My first objective would be to restructure the HTML to take advantage of the server's power to create the HTML the right way before delivering it to the browser.

The very first thing that I see is an inline element beside a block level element. Your outer table cell contains a span and a div. The span is an inline element, the div is a block level element. So to avoid the browser having to make a command decision to treat the span as a block level element, I would at least style the span to behave like a block level element.
td.ColStyle span { display: block; }

Open in new window


Then the content of the span is a number. If that number is being generated by the back end in either PHP or ASP.NET, that same code can generate the contents of the div and append the query string value to the link tag 's URL. Why create the link tag, find and concatenate the contents of the span to the link URL and then add the link tag and img tag on the front end?

And the same logic that determines to add the table with the p tag, would know not to add the img.

And finally, I can find almost no justification for a single cell table. Why not just have the p tag by itself?

But this is all beside the point. Miguel Oz has provided a solution to your question if it is OK to hide the link tag that contains the img instead of hiding the img per your instructions. If you specifically want to hid the img and not the link tag, just change the 'a' on line 5 to 'img':
//find all td that has ColStyle and p 
var $target = $('td.ColStyle').has('p');
if ($target.length > 0){
	//if found then hide the link
	$target.children('img').hide();	
}

Open in new window

0
 
maqskywalkerAuthor Commented:
Not sure if i understood.

Here is my revised fiddle:

http://jsfiddle.net/s9u9sasd

But it's not hiding the images.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now