是否有jQuery选择器来获取第一个锚元素没有文本内容的表行？
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-of-type:empty");
修改
上面的:first-of-type似乎不起作用。这3行都返回相同的结果：
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-of-type:empty");
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-child:empty");
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:empty");
完整示例：
$(document).ready(function() {
alert($("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-of-type:empty").length);
alert($("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-child:empty").length);
alert($("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:empty").length);
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-child:empty").each(function() {
alert(this.id);
});
});td {
border: 1px solid #000;
width: 50%;
}
a {
display: inline-block;
border: 1px solid #00f;
min-height: 20px;
min-width: 40px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tbl" style="width: 100%">
<tbody>
<tr class="item" id="one">
<td><a href="/">ONE</a></td>
<td><a></a></td>
</tr>
<tr class="alternatingitem" id="two">
<td><a href="/">TWO</a></td>
<td><a>TWO</a></td>
</tr>
<tr class="item" id="three">
<td><a href="/"></a></td>
<td><a>THREE</a></td>
</tr>
</tbody>
</table>
答案 0 :(得分：2)
来自MDN：
:emptypseudo-class代表任何没有孩子的元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否为空。
您的第一个锚元素可能不包含子元素或文本，但它当然可能包含空格。如果是，则:empty伪类赢得选择它。
您可以检查第一个锚元素是否在修剪了空白后有文本
var $trWithEmptyAnchor = $("#tbl > tbody").children("tr.item, tr.alternatingitem").filter(function () {
return !$.trim($(this).find('a:first-of-type').text());
});
console.log($trWithEmptyAnchor);
答案 1 :(得分：0)
$("#tbl > tbody").children("tr.item, tr.alternatingitem").has("a:first-child:empty");
：first-child伪类将获得第一个元素。
答案 2 :(得分：0)
我认为你可以像这样使用.map jQuery方法。
var allLinks = $("#tbl > tbody").children("tr.item, tr.alternatingitem");
var emptyLinks = $.map(allLinks, function(item, index) {
// item will reference any of your anchor elements
// check if link has text
if($(item).text() != "") {
return item;
}
});
希望它有所帮助...
答案 3 :(得分：0)
我无法通过一系列选择器实现您所描述的内容。
first-of-type选择器匹配相同类型的兄弟姐妹，因为你的元素都不是兄弟姐妹，所以它们都被认为是他们类型的第一。实质上，您选择的所有行都包含空<a>，这不是所需的功能。
以下是使用first-of-type选择器的演示。为简洁起见，代码缩小了。
$("#tbl > tbody").children("tr.item, tr.alternatingitem").find("a:first-of-type:empty").addClass('highlight');td { border: 1px solid #000; width: 50%; } a { display: inline-block; border: 1px solid #00f; min-height: 20px; min-width: 40px; } .highlight { background-color: red; }<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script><p>Each <strong>a:first-of-child</strong> is highlighted in red:</p><table id=tbl style=width:100%><tbody><tr class=item id=one><td><a href="/">ONE</a><td><a></a><tr class=alternatingitem id=two><td><a href="/">TWO</a><td><a>TWO</a><tr class=item id=three><td><a href="/"></a><td><a>THREE</a></table>
但是，我使用each()让它工作。给定您选择的所有行，我会遍历每一行以确定其第一个<a>是否为空。
$("#tbl > tbody").children("tr.item, tr.alternatingitem").each(function(index,row) {
$(row).find('a').first().filter(':empty').closest('tr').addClass('highlight');
});
$("#tbl > tbody").children("tr.item, tr.alternatingitem").each(function(index,row) {
$(row).find('a').first().filter(':empty').closest('tr').addClass('highlight');
});td {
border: 1px solid #000;
width: 50%;
}
a {
display: inline-block;
border: 1px solid #00f;
min-height: 20px;
min-width: 40px;
}
.highlight {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tbl" style="width: 100%;">
<tbody>
<tr class="item" id="one">
<td><a href="/">ONE</a></td>
<td><a></a></td>
</tr>
<tr class="alternatingitem" id="two">
<td><a href="/">TWO</a></td>
<td><a>TWO</a></td>
</tr>
<tr class="item" id="three">
<td><a href="/"></a></td>
<td><a>THREE</a></td>
</tr>
</tbody>
</table>
使用filter()可以说更优雅（类似于Josh Crozier的答案）：
$("#tbl > tbody").children("tr.item, tr.alternatingitem").filter(function(index,row) {
return $(row).find('a').first().is(':empty');
}).addClass('highlight');
$("#tbl > tbody").children("tr.item, tr.alternatingitem").filter(function(index,row) {
return $(row).find('a').first().is(':empty');
}).addClass('highlight');td {
border: 1px solid #000;
width:50%;
}
a {
display:inline-block;
border: 1px solid #00f;
min-height:20px;
min-width:40px;
}
.highlight {
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tbl" style="width: 100%;">
<tbody>
<tr class="item" id="one">
<td><a href="/">ONE</a></td>
<td><a></a></td>
</tr>
<tr class="alternatingitem" id="two">
<td><a href="/">TWO</a></td>
<td><a>TWO</a></td>
</tr>
<tr class="item" id="three">
<td><a href="/"></a></td>
<td><a>THREE</a></td>
</tr>
</tbody>
</table>
或按照map()的建议使用Giorgos Manoltzas：
$("#tbl > tbody").children("tr.item, tr.alternatingitem").map(function(index,row) {
if ($(row).find('a').first().is(':empty')) {
return row;
}
}).addClass('highlight');
$("#tbl > tbody").children("tr.item, tr.alternatingitem").map(function(index,row) {
if ($(row).find('a').first().is(':empty')) {
return row;
}
}).addClass('highlight');td {
border: 1px solid #000;
width:50%;
}
a {
display:inline-block;
border: 1px solid #00f;
min-height:20px;
min-width:40px;
}
.highlight {
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tbl" style="width: 100%;">
<tbody>
<tr class="item" id="one">
<td><a href="/">ONE</a></td>
<td><a></a></td>
</tr>
<tr class="alternatingitem" id="two">
<td><a href="/">TWO</a></td>
<td><a>TWO</a></td>
</tr>
<tr class="item" id="three">
<td><a href="/"></a></td>
<td><a>THREE</a></td>
</tr>
</tbody>
</table>