插入新跨越元素，如果它不存在

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> 

所以输出的样子：

<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')为目标的循环当前元素：

$('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()方法来检查，如果有一个span旁边input。我使用next，因为closest()只查找父元素，所以它不适用于您正在尝试执行的操作。

Answer 2

您可以将Next Adjacent Selector (“prev + next”)与.not(selector)合用。

的片段：

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

.added { 
 
    background-color: blue; 
 
}

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

一种不同的方法可以基于filter。

的片段：

$('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'}))

.added { 
 
    background-color: blue; 
 
}

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