Solved

if parent does not contain specific descendant then do something

Posted on 2013-05-15
23
204 Views
Last Modified: 2013-05-16
  $('#frame th[scope="col"]').each(function () {
            if ($(this).text() == 'Original Due Date') {
                $(this).parent().closest('#frame').css('background-image', 'none');
                //$(this).css('background-image', 'none');
            }

        });    

Open in new window



the code above finds a matching child and then go up the DOM tree to find a parent tag.

(thanks expert Gary!)


Now, I want to tweak this.

If a frame does not have a descendant tag of a certain criteria, then I want to do something.


So if a div with id "frame" does NOT have a child tag with text of a certain kind, then I want to do something.
0
Comment
Question by:Tom Knowlton
[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
  • 12
  • 8
  • 3
23 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39169952
And what is the child tag?
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39169956
Let's say the child tag  (that should NOT exist) is:

<th scope="col">Original Due Date</th>



<div id="frame" style="background-image: none;">
    <div id="frame_header" style="height: 0px;">
        

                <div id="frame_navigation" style="height: 0px; border-bottom-color: blue; border-bottom-style: solid; border-bottom-width: 1px; width: 0px;">
        	        <ul id="ctl09_ctl02_AssetFrameNavigation1_tabList" style="display: none;">
            	       <!-- <li><a href="test.html" title="tasks" class="frame_tab" rel="shadowbox[test]">Tasks</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Asset</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Marketing</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab_current" rel="shadowbox[test]">Valuation</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Photos/Docs</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Comments</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Property Preservation</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Eviction</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Inspections</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Agent Forms</a></li>
            	        <li><a href="http://google.com" title="Test" class="frame_tab" rel="shadowbox[test]">Closing Title</a></li>-->
                        <li class="frame_navigation_no_tab">
                	        
                        </li>
                    <li><a id="ctl09_ctl02_AssetFrameNavigation1_MARKET" class="frame_tab" href="Asset.aspx?MenuId=106&amp;AssetID=32380-1">Marketing</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_COMMENTS" class="frame_tab" href="Asset.aspx?MenuId=107&amp;AssetID=32380-1">Comments</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_MLSVRFYI" class="frame_tab" href="Asset.aspx?MenuId=370&amp;AssetID=32380-1">Asset Watch</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_OfferBuyers" class="frame_tab" href="Asset.aspx?MenuId=303&amp;AssetID=32380-1">Offer</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_AssetTask" class="frame_tab" href="Asset.aspx?MenuId=228&amp;AssetID=32380-1">Asset Task</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_CONTINFO" class="frame_tab" href="Asset.aspx?MenuId=229&amp;AssetID=32380-1">Contact Info</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_Task_FollowUp" class="frame_tab" href="Asset.aspx?MenuId=219&amp;AssetID=32380-1">Follow Up</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_AgentForms" class="frame_tab" href="Asset.aspx?MenuId=127&amp;AssetID=32380-1">Agent Forms</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_Eviction" class="frame_tab" href="Asset.aspx?MenuId=50&amp;AssetID=32380-1">Eviction</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_Preserv" class="frame_tab" href="Asset.aspx?MenuId=74&amp;AssetID=32380-1">Property Preservation</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_InspHist" class="frame_tab" href="Asset.aspx?MenuId=230&amp;AssetID=32380-1">Inspection History</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_PhotoDocs" class="frame_tab" href="Asset.aspx?MenuId=8&amp;AssetID=32380-1">Photos Docs</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_TESTHUD" class="frame_tab" href="Asset.aspx?MenuId=72&amp;AssetID=32380-1">Closing/Title</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_Exp_AFilter" class="frame_tab" href="Asset.aspx?MenuId=20&amp;AssetID=32380-1">Expenses</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_AssetInfoMain" class="frame_tab" href="Asset.aspx?MenuId=111&amp;AssetID=32380-1">Asset Info</a></li><li><a id="ctl09_ctl02_AssetFrameNavigation1_AuditAsset" class="frame_tab" href="Asset.aspx?MenuId=154&amp;AssetID=32380-1">Audit</a></li></ul>
                </div>
        <!-- This is the frame main navigation tabs -->
        <div id="frame_title">
            <h1>Asset Task</h1>
            <!-- Page tile -->
        </div>
        <div id="frame_header_secondary_Navigation" class="shown" style="height: 0px;">
            <!-- This area is for the secondary navigation -->           
        </div>
    </div>
    <div id="corpus">        
       <h6>Postponed Task</h6>
        <div id="ctl09_ctl02_divPostponedTaskGrid">
            <div>
			<table class="grid_view" cellspacing="0" id="gvPostponedTaskGrid" style="border-collapse:collapse;">
				<tbody><tr class="grid_view_header">
					<th scope="col">Original Due Date</th><th scope="col">New Due Date</th><th scope="col">Date Postponed</th><th scope="col">Postponed By</th><th scope="col">Postpone Comment</th>
				</tr><tr>
					<td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblOriginalDueDate">Jan 17 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblNewDueDate">Feb 15 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblDatePostponed">1/18/2013 1:44:29 PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblPostponedBy">Shannan Hoffman</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblPostponeComment"></span>
                        </td>
				</tr><tr class="grid_view_alt_row">
					<td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblOriginalDueDate">Feb 15 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblNewDueDate">Feb 22 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblDatePostponed">2/19/2013 1:57:53 PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblPostponedBy">Shannan Hoffman</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblPostponeComment"></span>
                        </td>
				</tr>
			</tbody></table>
		</div>          
        </div>
    </div>
</div>

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39169960
So this means that the encapsulating div:

<div id="frame">


</div>


must NOT contain:

<th scope="col">Original Due Date</th>


In order to be a match.
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 58

Expert Comment

by:Gary
ID: 39169963
That doesn't make sense - that's the code you were looking for to start with :S
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169972
Not entirely sure this is what you want
http://jsfiddle.net/FgmDC/4/
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169974
Update, lots of syntax errors and added a test div.
http://jsfiddle.net/FgmDC/5/
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39169975
The rows that just have "Postponed Tasks" with no table information are the ones I want to HIDE :

match
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169976
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39169992
I tried to revise the code to hide the ENTIRE <div> with id = "frame" but it is not working:

        $("#frame").each(function () {
            if ($(this, "th[scope='col']").length && $(this, "th[scope='col']").text() != 'Original Due Date') {               
                $(this).parent().closest('#frame').css('display', 'none');                
            }
        });

Open in new window



A little help?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39169996
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39170011
There is more than one <div id="frame">

I cannot fix this right now.

I only want to hide the <div id="frame"> that has

<h6>Postponed Task</h6>

BUT NO TABLE DATA

as per the mock-up image I attached above.



I appreciate your patience.


Your most recent code is not working.  It is hiding ALL the frames.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39170025
It won't work for that tag because that's not what you said you wanted matching
How do I know if there is no table data - will there be something absent?
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39170037
For parent <div id="frame"> that DO have data:

<div id="corpus">        
       <h6>Postponed Task</h6>
        <div id="ctl09_ctl02_divPostponedTaskGrid">
            <div>
			<table class="grid_view" cellspacing="0" id="gvPostponedTaskGrid" style="border-collapse:collapse;">
				<tbody><tr class="grid_view_header">
					<th scope="col">Original Due Date</th><th scope="col">New Due Date</th><th scope="col">Date Postponed</th><th scope="col">Postponed By</th><th scope="col">Postpone Comment</th>
				</tr><tr>
					<td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblOriginalDueDate">Jan 17 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblNewDueDate">Feb 15 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblDatePostponed">1/18/2013 1:44:29 PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblPostponedBy">Shannan Hoffman</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl02_lblPostponeComment"></span>
                        </td>
				</tr><tr class="grid_view_alt_row">
					<td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblOriginalDueDate">Feb 15 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblNewDueDate">Feb 22 2013 11:59PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblDatePostponed">2/19/2013 1:57:53 PM</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblPostponedBy">Shannan Hoffman</span>
                        </td><td>
                            <span id="ctl09_ctl02_gvPostponedTaskGrid_ctl03_lblPostponeComment"></span>
                        </td>
				</tr>
			</tbody></table>
		</div>          
        </div>
    </div>

Open in new window


For parent <div id="frame"> that have no data:

 <div id="ctl09_ctl08_divPostponedTaskGrid">
            <div>

		</div>          
        </div>

Open in new window





The <table> </table>  will be missing.  That is the difference.


I am sorry - I should have been more clear up front.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39170074
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39170078
Does not seem to work.

I will be back in about 17 hours and we can pick this up then.

Thank you.

I am sure it is something small I am missing or mistyped.
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 39172051
Thanks for your time.


Here was my eventual solution, based upon the info you provided above:

 $('div[id*="_divPostponedTaskGrid"]').each(function () {

            var tablecount = $(this).children('div').children().size();
           
            if (tablecount == 0) {
                $(this).closest('#frame').hide();
            }
            else {
                $(this).closest('#frame').css('background-image', 'none');
            }
        });

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39172073
Came to this one a bit late, but based on you wanting to hide a #Frame if it doesn't contain a table, with a grid-view class, this would do it.

$('#frame h6').each(function() {
    if (! $(this).parent('#frame').find('.grid_view').length ) {
        $(this).parent('#frame').hide();
    }
});

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39172091
Thanks for the follow-up.

It is always nice to have several options!

I did not know about find(  )  -- nice!!!!!
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39172112
in jQuery, there's always more than one way to skin a cat ;)

find() is very handy - http://api.jquery.com/find/
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39172126
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.


find(  ) seems better than children(  )  ??
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39172129
Why wasn't

 <li class="item-iii">III</li>


included in the matches for:

$('li.item-ii').find('li').css('background-color', 'red');

in the example (the link you gave)

?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39172227
It's not that find() is better than children() - they're just different. find() will keep going down the levels finding all instances of a given selector - children will just look at the direct children!

<div id="testDiv">
     <p>This is a paragraph</p>
     <div><p>This is another paragraph</p></div>
</div>

$('#testDiv').children('p') - will only select the first paragraph
$('#testDiv').find('p') - will select all the paragraphs!

Open in new window

As for <li class="item-iii">III</li> not being found by $('li.item-ii').find('li') - it's not a descendant of li.item-ii - it's a sibling!

<ul>
     <li class="item-ii">II
     <ul class="level-2">
          <li class="item-a">A</li>
          <li class="item-b">B
          <ul class="level-3">
               <li class="item-1">1</li>
               <li class="item-2">2</li>
               <li class="item-3">3</li>
          </ul>
          </li>
          <li class="item-c">C</li>
     </ul>
     </li>
     <li class="item-iii">III</li>

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39172238
As for <li class="item-iii">III</li> not being found by $('li.item-ii').find('li') - it's not a descendant of li.item-ii - it's a sibling!

Got it.


And thanks for the clarification on children(  ) vs  find(  )  

: )
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

730 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