Solved

if parent does not contain specific descendant then do something

Posted on 2013-05-15
23
200 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:knowlton
  • 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: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: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
 
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: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: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: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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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: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: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: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 42

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: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 42

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: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: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 42

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: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

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

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

743 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