?
Solved

jquery selector find p tag in table cell

Posted on 2016-10-21
3
Medium Priority
?
20 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 36

Accepted Solution

by:
Miguel Oz earned 1000 total points
ID: 41854757
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 22

Assisted Solution

by:Kim Walker
Kim Walker earned 1000 total points
ID: 41854813
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
ID: 41855226
Not sure if i understood.

Here is my revised fiddle:

http://jsfiddle.net/s9u9sasd

But it's not hiding the images.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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)

801 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