Question

我有这段代码根据tr

中的某些标签隐藏表格的某些td

$('label:contains("Severity")').parent().parent().toggle();
$('label:contains("Priority")').parent().parent().toggle();
$('label:contains("Select Profile")').parent().parent().toggle();
$('label:contains("Assign To")').parent().parent().toggle();
$('label:contains("Steps To Reproduce")').parent().parent().toggle();
$('label:contains("Additional Information")').parent().parent().toggle();
$('label:contains("Attach Tags")').parent().parent().toggle();
$('label:contains("Reproducibility")').parent().parent().toggle();

这很有效，我知道它可能会更加整洁。我如何将这些字符串添加到数组并执行数组中条目的parent().parent().toggle(); foreach？

对于奖励积分，是否有更简洁的方法parent().parent()？

Answer 1

试试这个：

var array = [
    "Severity",
    "Priority",
    "Select Profile",
    "Assign To",
    "Steps To Reproduce",
    "Additional Information",
    "Attach Tags",
    "Reproducibility",
];

for (var i = 0; i < array.length; i++) {
    $('label:contains("' + array[i] + '")').parent().parent().toggle();
}

要获得更好的.parent().parent()方式，请参阅此帖子：More efficient way to do parent().parent().parent() etc. in jquery

Answer 2

由于jQuery基于集合的性质，您可以使用selector group。这样做的好处是你可以执行一个 DOM查询而不是一系列查询。这对于:contains尤为重要，因为:contains是jQuery扩展，而不是浏览器内置选择器引擎支持的内容。

你可以按字面意思做到：

$('label:contains("Severity"), label:contains("Priority"), label:contains("Select Profile"), label:contains("Assign To")', label:contains("Steps To Reproduce"), label:contains("Additional Information"), label:contains("Attach Tags"), label:contains("Reproducibility")').parent().parent().toggle();

但那真是太丑了，所以：

var selector = ["Severity", "Priority", "Select Profile", "Assign To", "Steps To Reproduce", "Additional Information", "Attach Tags", "Reproducibility"]
    .map(function(name) {
        return 'label:contains(" + text + ")';
    })
    .join(",");
$(selector).parent().parent().toggle();

或者如果你真的想：

$(["Severity", "Priority", "Select Profile", "Assign To", "Steps To Reproduce", "Additional Information", "Attach Tags", "Reproducibility"]
    .map(function(text) {
        return 'label:contains("' + text + '")';
    })
    .join(",")
).parent().parent().toggle();

带有ES2015 +箭头功能和模板文字：

$(["Severity", "Priority", "Select Profile", "Assign To", "Steps To Reproduce", "Additional Information", "Attach Tags", "Reproducibility"]
    .map(text => `label:contains("${text}")`)
    .join(",")
).parent().parent().toggle();

我有这段代码可以根据td
中的某些标签隐藏某些表格

您也可以将.parent().parent()替换为.closest('tr')作为DJ Yadav suggested in a comment，以使事情更加灵活（例如，如果您将label放入span以后出于某种原因，你不会破坏你的代码。）

Answer 3

[
    "Severity",
    "Priority",
    "Select Profile",
    "Assign To",
    "Steps To Reproduce",
    "Additional Information",
    "Attach Tags",
    "Reproducibility",
].forEach(function(el) {
    $('label:contains("' + el + '")').parent().parent().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

首先，最好使用类或data属性来选择，而不是像你一样使用:contains选择器。如果你想改变你的文字怎么办，现在你也必须改变你的逻辑！

最好创建一个类似“隐藏我”的类，这样您就可以选择像$(".hide-me")这样的类。然后，如果要查找特定的父元素（例如<tr>标记），最好明确它（因此不要使用parent().parent()等）。再次，如果您想将标签包装在另一个div中以添加一些填充，该怎么办？你的逻辑坏了！

而是使用$.parents()或$.closest()函数，它的作用类似于$.find()，除了它们向上遍历（都是通过祖先传播，只有$.closest()在第一场比赛时停止，而$.parents()前往文档根目录，同时将每个匹配项添加到列表中）。然后传递<tr>标记的选择器，以便您可以实际选择行。

看起来像这样（如果你使用我建议的课程）

$(".hide-me").closest("tr").toggle();

这将同时适用于所有行，因此无需为多个文本执行此操作。

如果你坚持使用contains或者至少需要为每一行指定它，那么确实使用这样的数组：

$.each(array('text1','text2', 'text3' ..), function(index, value) {
   $('label:contains('+value+')').closest("tr").toggle();
}

此外，如果您仅使用$.toggle()隐藏一次，请使用$.hide()代替$.toggle()。虽然两者都有效，$.toggle()表示您实际上在display:block和display:none之间切换。

Answer 5

简单地使用。

$(array [1]).hide();

按数组

5 个答案: