0

我有一个表，其中包含未设置样式的链接，因此我想将这些链接包装在 div 中并通过 Bootstrap 类设置它们的样式。我在使用 .contains() 函数时遇到了问题，我可能还需要一些关于 if 语句的帮助。

到目前为止，这是我的代码，这是一个链接，http://jsfiddle.net/clintongreen/LFb6M/

// Add Bootstrap button classes to Admin links
if($('td.menu-operations a:contains("add")') {
$(this).css('color','white').wrap('<div class="btn btn-inverse btn-mini" />');
}
else if($('td.menu-operations a:contains("edit")') {
$(this).css('color','white').wrap('<div class="btn btn-danger btn-mini" />');
}
else if($('td.menu-operations a:contains("delete")') {
$(this).css('color','white').wrap('<div class="btn btn-danger btn-mini" />');
}
else ($('td.menu-operations a')){
$(this).css('color','white').wrap('<div class="btn btn-danger btn-mini" />');
}

谢谢大家:)

4

2 回答 2

1

Doingif($(selector))总是会评估 true，正确的版本是if($(selector).length)，但在这种情况下if不需要。你也可以使用this它，好像它会在每个 if 块中改变（它不会）

// Add Bootstrap button classes to Admin links
$('td.menu-operations a:contains("add")').css('color','white');
$('td.menu-operations a:contains("edit")').css('color','white');
$('td.menu-operations a:contains("delete")').css('color','white');
$('td.menu-operations a').css('color','white').wrap('<div class="btn btn-danger btn-mini" />');

http://jsfiddle.net/LFb6M/11/

于 2013-06-23T21:43:58.013 回答
0

事实证明，我不需要 if 语句来解决这个问题。感谢@Musa 指出这一点并让我走上正轨。我能够从他的回答中弄清楚该怎么做。我会把它标记为正确的，但我觉得它需要更充实一点，这样更容易理解。

你可以在这里看到它的运行http://jsfiddle.net/clintongreen/LFb6M/15/

// Add Bootstrap button classes to Admin links
$('td.menu-operations a').css('color','white').wrap('<div class="btn btn-mini" />');
$('td.menu-operations a:contains("add")').parent().addClass('btn-primary');
$('td.menu-operations a:contains("edit")').parent().addClass('btn-inverse');
$('td.menu-operations a:contains("delete")').parent().addClass('btn-danger');

上面发生的情况是，我们使用 .wrap() 将所有链接包装在带有默认 Bootstrap 类的 div 中，然后我们使用 :contains 选择器来定位具有特定文本的链接，然后使用 .parent() 定位新生成的 div 并添加通过 .addClass() 适当的类

PS：使用 :contains 时要小心使用选择器而不是默认的 .contains() 函数，因为这不适用于文本。

于 2013-06-23T22:43:13.050 回答