如何根据 jQuery 的标题隐藏 html 元素？

Question

我需要根据标题值隐藏一些元素（它是一个 SharePoint 网站，sharePoint 为所有元素名称和 ID 添加了一个 guid），我看到使用 jQuery 可以很容易地做到这一点，但我没有让它工作。

我看到了Get element by title jQuery，但它对我不起作用。我的代码的一部分是：

<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="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>

Answer 1

jQuery 对象没有parentNode 属性。那是为了处理 DOM 元素。 jQuery 可以使整个任务变得更容易：

您可以使用.get() 来获取实际的 DOM 节点：

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

然而这对于 jQuery 来说有点倒退，更有意义的是使用 .parent() 和 .css()：

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

更有意义的是只查找与您实际查找的内容相匹配的 .closest() 父级。 （即<tr>），也许只使用.hide()

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

就选择器而言，$("select[title='Something']") 将寻找 <select title='something'>，这可能不是您想要的...

Answer 2

你可以使用：

control.hide();

Answer 3

您的代码可能没有运行，因为名为“document”的元素不存在。

改变： $("document").ready(function ($) {

到：

$(document).ready(function(){