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

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.

I saw Get element by title jQuery but it doesn't work for me. A part of my code is:

<script src="/System%20Configuration%20Files/jquery-1.3.2.min.js";  type="text/javascript";></script>
<script src="/System%20Configuration%20Files/jquery.SPServices-0.4.1.min.js";  type="text/javascript";></script>


<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
//note that field level GUIDs can change when list columns are added or amended in the list

   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='% Complete']");
   control.parentNode.parentNode.parentNode.style.display="";


//Baseline
   control = $("select[title='Baseline']");
   control.parentNode.parentNode.parentNode.style.display="non开发者_StackOverflowe";



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

jQuery objects do not have a parentNode property. That is for working with DOM elements. jQuery can make this whole task a lot easier:

You could use .get() to get the actual DOM node:

control.get(0).parentNode.parentNode.parentNode.style.display="none";

However this is kind of backwards for jQuery, what would make more sense is to use the .parent() and .css():

control.parent().parent().parent().css('display', 'none');

And even more sense would be to just look for the .closest() parent that matches what you are actually looking for. (I.E a <tr>) and maybe just use .hide()

control.closest('tr').hide();

As far as the selector goes, $("select[title='Something']") will look for a <select title='something'>, which may not be what you want...

you can use:

control.hide();

Your code is probably not running because an element named "document" doesn't exist.

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

to:

$(document).ready(function(){