jquery selector exclude elements containing input with focus

Question

I spent quite a bit of time trying to come up with this today to no avail.

I'm trying to select rows in a table having visible input elements but excluding the row that contains the input with focus.

My best guesses:

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

Neither of these remove the row with the focused input. I read that :focus is a pseudo selector, is that part of my problem or is that a label for everything with a colon?

Is it possible to do this within the selector? I could also just loop through manually with a conditional, but I'd like to be able to avoid that.

Looping through manually with a conditional is exactly what jQuery is doing behind the scenes for those selectors, just fyi. — Josh Burgess
– Josh Burgess, Commented Feb 18, 2015 at 21:01

Josh Crozier · Accepted Answer · 2015-02-18 21:27:55Z

2

You could use .filter() to return tr elements with input elements that aren't focused.

In this case, .is(':focus') is used to determine whether the child input is focused. If it isn't, then it is returned and added to the collection of tr elements.

Example Here

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

Based on this example, though, it looks like both of your original jQuery selectors were working properly. Perhaps you are querying the DOM when the input element doesn't have focus?

edited Feb 18, 2015 at 21:27

answered Feb 18, 2015 at 21:01

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Karl-André Gagnon Over a year ago

.filter need to return a boolean, not the object. it should be return !$('input', this).is(':focus'). Your function is a bit overkill now.

Josh Crozier Over a year ago

@Karl-AndréGagnon Thanks, I didn't realize I could do that--updated :)

aaron Over a year ago

I think I must have been hitting a race condition with setting focus then, thanks for the fiddle setup (and the custom filter function)

jyrkim · Accepted Answer · 2015-02-18 21:28:29Z

Updated, actually I tested your two jQuery selectors in your question, and those were working correctly based on my test :-) The length of how many elements are found based on the query are printed to the console.

$("#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

<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>

Collectives™ on Stack Overflow

jquery selector exclude elements containing input with focus

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related