jquery - 如果新的 span 元素尚不存在，则在 input 元素之后插入该元素

Question

这就是我的 html 代码的样子:

<label><span>1</span><input type="radio" value="1" name="choice">
<span>Poor</span></label>

<label><span>2</span><input type="radio" value="2" name="choice"></label>

<label><span>3</span><input type="radio" value="3" name="choice"></label>

<label><span>4</span><input type="radio" value="4" name="choice"></label>

<label><span>5</span><input type="radio" value="5" name="choice">
<span>Great</span></label>

第二个、第三个和第四个标签 block 在 input 元素之后没有 span 元素。如果在这样的列表中，输入元素后面没有 Span，我需要插入一个空的 Span 标签。

<span></span>

所以输出如下:

<label><span>1</span><input type="radio" value="1" name="choice">
<span>Poor</span></label>

<label><span>2</span><input type="radio" value="2" name="choice"><span>
</span></label>

<label><span>3</span><input type="radio" value="3" name="choice"><span>
</span></label>

<label><span>4</span><input type="radio" value="4" name="choice"><span>
</span></label>

<label><span>5</span><input type="radio" value="5" name="choice">
<span>Great</span></label>

我是 jQuery 新手，这就是我到目前为止正在尝试的:

$('input').each(function() {
  if($(this).closest('span').length<1) {
    $('input').after("<span></span>");
  }
});

但这会在每个标签 block 中插入几个空跨度。如有任何帮助，我们将不胜感激。

Answer 1

您必须使用 $(this) 而不是 $('input') 来定位循环中的当前元素:

$('input').each(function(i) {
  if ($(this).next('span').length < 1) {
    $(this).after("<span style='color: #f00;'>" + i + "</span>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><span>1</span><input type="radio" value="1" name="choice">
<span>Poor</span></label>

<label><span>2</span><input type="radio" value="2" name="choice"></label>

<label><span>3</span><input type="radio" value="3" name="choice"></label>

<label><span>4</span><input type="radio" value="4" name="choice"></label>

<label><span>5</span><input type="radio" value="5" name="choice">
<span>Great</span></label>

此外，您还可以使用 next() 方法检查 input 旁边是否有 span。我使用 next 是因为 closest() 仅查找父元素，因此它不适用于您想要执行的操作。