Better way to check if some inputs type file is empty in jquery?

Question

I know that is simple question but I need an advice from experienced people.

I have 3 input type file like:

<input type="file" name="1-files" />
<input type="file" name="2-files" />
<input type="file" name="3-files" />

I select all inputs (on my page I have also other inputs type file) which name ends with "-files" ( I wrote in Google Chrome console):

$("input[type='file'][name*='-files']").length

Ok. I select a file using 1-files input. After that, I run the following code in Google Chrome console:

$("input[type='file'][name*='-files']:empty").length

I expect to be 2 but appears 3.

Can you tell me why ?

I want to get all elements of input type file which values are empty. I used in short way the selector :empty but it seems not working properly.

Of course, I could use

var empty_count = 0;
$.each($("input[type='file'][name*='-files']"), function(k, v){
  if($(this).val() === '')
     empty_count++;
});

But I want the shortest way to do this without $.each.

Thank you

Answer 1

It matches three because :empty matches an element with no descendants, and am input element by definition cannot have descendants (so all are empty, and therefore match the :empty selector).

To find those elements without selected files, I'd suggest:

$("input[type='file'][name*='-files']").filter(function (){
    return !this.value
}).length;

References:

• :empty selector.
• filter().