Solved

jquery selector find p tag in table cell

Posted on 2016-10-21
3
10 Views
Last Modified: 2016-10-23
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
Comment
Question by:maqskywalker
3 Comments
 
LVL 35

Accepted Solution

by:
Miguel Oz earned 250 total points
Comment Utility
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
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
Comment Utility
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
 
LVL 1

Author Comment

by:maqskywalker
Comment Utility
Not sure if i understood.

Here is my revised fiddle:

http://jsfiddle.net/s9u9sasd

But it's not hiding the images.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now