Find first empty class div

Question

<input type='text' class='inptag' id='inptag'>

<div class='tagstore' id='tagstore'>
    <div class='tagsingle'></div>
    <div class='tagsingle'></div>
    <div class='tagsingle'></div>
    <div class='tagsingle'></div>
    <div class='tagsingle'></div>
</div>

js

I need to find first empty tagsingle and make its text as a.

$('#inptag').keypress(function(e) {
    if (event.keyCode === 13) {
        e.preventDefault();
        var a = $(this).val().trim();
        // here I need something like:
        $('.tagsingle:first-empty').text(a);
    }
});

Any help?

Answer 1

Use first and empty separately as

$('.tagsingle:empty:first').text(a); //get empty first and then first

Demo

$('#inptag').keypress(function(e) {
  if (event.keyCode === 13) {
    e.preventDefault();
    var a = $(this).val().trim();
    // here I need something like:
    $('.tagsingle:empty:first').text(a);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='inptag' id='inptag'>

<div class='tagstore' id='tagstore'>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
</div>
js

Answer 2

You could use :empty selector then the first() method like :

$('.tagsingle:empty').first().text('a');

So you're filtering first the empty elements with class tagsingle then you're getting the first occurrence from returned result.

$('#inptag').keypress(function(e) {
  if (event.keyCode === 13) {
    e.preventDefault();
    var a = $(this).val().trim();

    $('.tagsingle:empty').first().text('a');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='inptag' id='inptag'>

<div class='tagstore' id='tagstore'>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
  <div class='tagsingle'></div>
</div>