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

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>