Question

我今天花了很多时间试图提出这个问题无济于事。

我正在尝试在具有可见输入元素的表中选择行，但不包括包含焦点输入的行。

我最好的猜测：

$('tr:has(input:visible)').not('tr:has(input:focus)')
$('tr:has(input:visible):not(:has(input:focus))')

这些都没有使用聚焦输入删除行。我读到：焦点是一个伪选择器，是我的问题的一部分还是带有冒号的一切标签？

是否可以在选择器中执行此操作？我也可以手动循环使用条件，但我希望能够避免这种情况。

Answer 1

您可以使用.filter()返回tr元素，其中input元素不会聚焦。

在这种情况下，.is(':focus')用于确定孩子input是否专注。如果不是，则返回并添加到tr元素的集合中。

Example Here

var tr = $('tr:has(input:visible)').filter(function () {
    return !$('input', this).is(':focus');
});

基于this example，看起来你的两个原始jQuery选择器都正常工作。也许您在input元素没有焦点时查询DOM？

Answer 2

更新了，实际上我在你的问题中测试了你的两个jQuery选择器，那些基于我的测试正常工作:-)基于查询找到多少元素的长度被打印到控制台。

＆＃13;

$("#firstInput").focus(); // set focus


console.log($('tr:has(input:visible)').not('tr:has(input:focus)').length) // 2

console.log($('tr:has(input:visible):not(:has(input:focus))').length); // 2

//$('tr:has(input:visible):not(:has(input:focus))').remove(); // removes two rows

//$('tr:has(input:visible)').not('tr:has(input:focus)').remove() // removes two rows

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Inputs</th>
    </tr>
    <tr>
        <td>Peter</td>
         <td>
            <input id="firstInput" type="text"/>
        </td>
        <td>
            <input id="firstIIInput" type="text"/>
        </td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>
            <input id="2ndInput" type="text"/>
        </td>
        <td>
            <input id="2ndIIInput" type="text"/>
        </td>
    </tr>
    <tr>
        <td>Gabriel</td>
        <td>
            <input id="3rdInput" type="text"/>
        </td>
        <td>
            <input id="3rdIIInput" type="text"/>
        </td>
    </tr>
</table>

＆＃13;

jquery选择器排除包含焦点输入的元素

2 个答案: