我有一个.filter
函数,它可以工作并将包含输入字段的所有<td>
的父项标记为红色。
但是,我需要完全相反的情况。因此,返回所有不包含<input
的字段。我尝试了if ($(this).html().indexOf('<input') == -1) {
但这只会以某种方式标记所有行。
我的jQuery:
$(document).ready(function () {
$("#ListView1_itemPlaceholderContainer table table table td").filter(function (index) {
if ($(this).html().indexOf('<input') > 0) {
return true;
}
}).closest('div').css('background-color', 'red');
});
这是我的网页
<div id="ListView1_itemPlaceholderContainer" style=
"font-family: Verdana, Arial, Helvetica, sans-serif;">
<div style="background-color: #FFFFFF; color: #333333;">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 71px"><img id="ListView1_userInfo1_0_ImageUser_0" src=
"http://pbs.twimg.com/profile_images/13/6GA5kEu6_normal.png" style=
"height:65px;width:65px;" /></td>
<td style="vertical-align: top">
<table style="width: 100%;">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tbody>
<tr>
<td><img id="ListView1_userInfo1_0_Imagebg_0" src=
"https://pbs.twimg.com/profile_banners/13/1402427948" style=
"height:64px;width:251px;" /><br />
<span id="ListView1_userInfo1_0_LabelName_0">dfgdfg</span>
@<span id=
"ListView1_userInfo1_0_LabelUserName_0">dfgdfg</span></td>
<td style="text-align: right"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><span style="font-size:10px">Follower-<span id=
"ListView1_userInfo1_0_LabelFollower_0">4578</span> ,
Following-<span id=
"ListView1_userInfo1_0_LabelFollowing_0">1654</span></span></td>
</tr>
<tr>
<td><span id="ListView1_userInfo1_0_LabelAbout_0"></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><br />
</div>
<div style="background-color: #EEEEEE;color: #333333;">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 71px"><img id="ListView1_userInfo_1_ImageUser_1" src=
"http://pbs.twimg.com/profile_images/12/ECWtACTn_normal.jpeg" style=
"height:65px;width:65px;" /></td>
<td style="vertical-align: top">
<table style="width: 100%;">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tbody>
<tr>
<td><img id="ListView1_userInfo_1_Imagebg_1" src=
"http://pbs.twimg.com/profile_background_images/37/pTBlAXSm.jpeg"
style="height:64px;width:251px;" /><br />
<span id="ListView1_userInfo_1_LabelName_1">dfgdfgd</span>
@<span id=
"ListView1_userInfo_1_LabelUserName_1">dfgdfgdf</span></td>
<td style="text-align: right"><input type="submit" name=
"ListView1$ctrl1$userInfo$ButtonFollow" value="Follow" id=
"ListView1_userInfo_1_ButtonFollow_1" style=
"height:100px;width:100px;" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><span style="font-size:10px">Follower-<span id=
"ListView1_userInfo_1_LabelFollower_1">4622</span> ,
Following-<span id=
"ListView1_userInfo_1_LabelFollowing_1">4007</span></span></td>
</tr>
<tr>
<td><span id="ListView1_userInfo_1_LabelAbout_1"></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><br />
</div>
</div>
我还查看了这篇文章jQuery:使用filter(),但按照评论者的建议处理这两个结果。
并尝试了这个:
<script type="text/javascript">
$(document).ready(function () {
$.fn.invert = function () {
return this.end().not(this);
};
$("#ListView1_itemPlaceholderContainer table table table td").filter(function (index) {
if ($(this).html().indexOf('<input') > 0) {
return true;
}
}).invert().closest('div').css('background-color', 'red');
});
</script>
但这也使所有行都变红。
你可以使用 .not() 和 :has()
$(document).ready(function () {
$("#ListView1_itemPlaceholderContainer table table table td").not(':has(input)').closest('div').css('background-color', 'red');
});
我认为你应该接受阿伦的回答。问题是 indexOf 返回第一个匹配字符 http://www.w3schools.com/jsref/jsref_indexof.asp 的索引,在您的情况下它将为 0,因此条件 > 0 将不适用。另外,对于 == -1 为所有行着色的问题,最好将您的函数应用于 tr 而不是 td
您可以将函数更改为
$(document).ready(function () {
$("#ListView1_itemPlaceholderContainer table table table tr").filter(function (index) {
if ($(this).html().indexOf('<input') > -1) {
return true;
}
}).closest('div').css('background-color', 'red');
});
将输入的行标记为红色,或反转条件以执行相反的操作。或者更好按照 Arun 的建议使用不同的选择器。
用于用输入 http://jsfiddle.net/q9othg59/2/标记行红色的小提琴并摆弄相反的 http://jsfiddle.net/q9othg59/4/