Question : How to hide html elements depending on what title they have with jQuery?

Hi,

I need to hide some elements depending on their title value (it's a SharePoint site and sharePoint adds a guid to all element names and ID's), I saw that with jQuery it is possible to do this quite easily but I don't get it to work.

A part of my code is:

<script type="text/javascript">  

$("document").ready(function ($) {

//turn off all hidden fields for different record types, then conditionally turn fields off and on based upon the item level selected

   var control;


//Progress Status
   control = $("select[title='Progress Status']");
   control.parentNode.parentNode.parentNode.style.display="none";

//Status Change Date
   control = $("select[title='Status Change Date']");
   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";


//Set for Milestone Action which is the default Item Level


//Strategic Objective
   control = $("select[title='Strategic Objective']");
   control.parentNode.parentNode.parentNode.style.display="";

//Strategic Priority
   control = $("select[title='Strategic Priority']");
   control.parentNode.parentNode.parentNode.parentNode.style.display="";

//Performance Measure
   control = $("select[title='Performance Measure']");
   control.parentNode.parentNode.parentNode.parentNode.style.display="none";

//Start Date  
   control = $("select[title='Start Date']");
   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";

//Target Date
   control = $("select[title='Target Date']");
   control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";

//Priority
   control = $("select[title='Priority']");
   control.parentNode.parentNode.parentNode.style.display="";

//Percentage Complete
   control = $("select[title='Percentage Complete']");
   control.parentNode.parentNode.parentNode.style.display="";

//Baseline
   control = $("select[title='Baseline']");
   control.parentNode.parentNode.parentNode.style.display="none";


//Current
   control = $("select[title='Current']");
   control.parentNode.parentNode.parentNode.style.display="none";


//Target
   control = $("select[title='Target']");
   control.parentNode.parentNode.parentNode.style.display="none"

      });

</script>

Is there anything wrong with the code or could it possibly be the parentNode.parentNode etc that gives me trouble?
Is it possible to do " control = $("select[title='Progress Status']");" at all?

Thanks in advance

Answer : How to hide html elements depending on what title they have with jQuery?

>>However I don't get all the number of .parent() correctly and it's a pain in the butt to find them every time.
>>I then saw on jQuery.com that I can use .closest() (http://api.jquery.com/closest/) so I thought I would be able to write something like:
If you had posted your HTML markup from the very start, I would have suggested that to begin with. The more info you provide, it is more likely that you are going to get a quick response/solution.

>>//Performance Measure
>>   control = $("select[title='Performance Measure']").closest('tr').hide();
>>It didn't work though and the elements are still visible.
That's because the element with title="Performance Measure" is NOT a <SELECT> tag. It is an <INPUT> tag, so what you needed is:
control = $("input[title='Performance Measure']").closest('tr').hide();
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
		$(function(){
			//just for demo purposes,
			//this will hide ONLY the <tr> with "Performace Measure" upon load
			$('input[title="Performance Measure"]').closest('tr').hide();
		});
		</script>
	</head>
	<body>
<table>
	<TR>
		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel">
		  	<H3 class="ms-standardheader"><nobr>Strategic Priority</nobr></H3>
		</TD>
		<TD valign="top" class="ms-formbody" width="400px">
            <!-- FieldName="Performance Measure"
                   FieldInternalName="Performance_x0020_Measure"
                   FieldType="SPFieldLookup"
              -->
			<span dir="none">
				<span style="vertical-align:middle">
					<input title="Strategic Priority" name="ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl01" type="text" id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="HandleLoseFocus()" opt="_Select" optHid="SPPerformance_x0020_Measure_Hiddenctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl06$c  tl00$ctl00$ctl04$ctl00" onkeypress="HandleChar()" onkeydown="HandleKey()" match="" choices="(None) lotsofoptions" onchange="HandleChange()" />
					<img alt="Display lookup values" onclick="ShowDropdown('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl  00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" />
				</span>
				<br/>
			</span>
		</TD>
	</TR>

	<TR>
		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel">
		  	<H3 class="ms-standardheader"><nobr>Performance Measure</nobr></H3>
		</TD>
		<TD valign="top" class="ms-formbody" width="400px">
            <!-- FieldName="Performance Measure"
                   FieldInternalName="Performance_x0020_Measure"
                   FieldType="SPFieldLookup"
              -->
			<span dir="none">
				<span style="vertical-align:middle">
					<input title="Performance Measure" name="ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl01" type="text" id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="HandleLoseFocus()" opt="_Select" optHid="SPPerformance_x0020_Measure_Hiddenctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl06$c  tl00$ctl00$ctl04$ctl00" onkeypress="HandleChar()" onkeydown="HandleKey()" match="" choices="(None) lotsofoptions" onchange="HandleChange()" />
					<img alt="Display lookup values" onclick="ShowDropdown('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl  00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" />
				</span>
				<br/>
			</span>
		</TD>
	</TR>
</table>
	</body>
</html>
Random Solutions  
 
programming4us programming4us