找到第一个空类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

我需要找到第一个空tagsingle并将其文本设为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);
    }
});

任何帮助？

Answer 1

分别使用first和empty作为

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

<强>演示

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

您可以使用:empty选择器，然后使用first()方法，如：

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

因此，您首先使用类empty过滤tagsingle个元素，然后从返回的结果中获取第一个匹配项。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用first()和filter(':empty')：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>