• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

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.
0
Tom Knowlton
Asked:
Tom Knowlton
  • 12
  • 8
  • 3
1 Solution
 
GaryCommented:
And what is the child tag?
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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

match
0
 
GaryCommented:
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
GaryCommented:
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
GaryCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
GaryCommented:
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Chris StanyonCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
Thanks for the follow-up.

It is always nice to have several options!

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

find() is very handy - http://api.jquery.com/find/
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Chris StanyonCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 12
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now