Link to home
Create AccountLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

if parent does not contain specific descendant then do something

  $('#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.
Avatar of Gary
Gary
Flag of Ireland image

And what is the child tag?
Avatar of Tom Knowlton

ASKER

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

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.
That doesn't make sense - that's the code you were looking for to start with :S
Not entirely sure this is what you want
http://jsfiddle.net/FgmDC/4/
Update, lots of syntax errors and added a test div.
http://jsfiddle.net/FgmDC/5/
The rows that just have "Postponed Tasks" with no table information are the ones I want to HIDE :

User generated image
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?
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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.
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?
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.
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.
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

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

Thanks for the follow-up.

It is always nice to have several options!

I did not know about find(  )  -- nice!!!!!
in jQuery, there's always more than one way to skin a cat ;)

find() is very handy - http://api.jquery.com/find/
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(  )  ??
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)

?
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

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(  )  

: )