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>

第二个，第三个和第四个标签块在输入元素后没有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>");
  }
});

但是这会在每个标签块中插入几个空跨度。任何帮助表示赞赏。

Answer 1

您必须使用$(this)代替$('input')来定位循环中的当前元素：

＆＃13;

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

＆＃13;

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

＆＃13;

此外，您可以使用next()方法检查span旁边是否有input。我之前使用过，因为closest()只查找父元素，所以它不适用于你想要做的事情。

Answer 2

您可以将Next Adjacent Selector (“prev + next”)与.not( selector )联系起来。

摘录：

＆＃13;

$('input').not($('input + span').prev())
     .after($('<span/>', {class: "added", text: 'added'}))

＆＃13;

.added {
  background-color: blue;
}

＆＃13;

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

＆＃13;

另一种方法可以基于filter。

摘录：

＆＃13;

$('input').filter(function(idx, ele) {
    //
    // return only input without a span as next sibling
    //
    return !$(ele).next().is('span');
}).after($('<span/>', {class: "added", text: 'added'}))

＆＃13;

.added {
  background-color: blue;
}

＆＃13;

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

＆＃13;

如果输入元素尚不存在，请在输入元素后插入新的span元素

2 个答案: