DOM元素數組的前綴數組

Question

我使用HTML表單，並且文本數組與表單中標籤標籤的確切數量相匹配。

形式：

<label id="1">First</label> 
<label id="2">Second</label> 
<label id="3">Second</label> 
<label id="4">Third</label> 
<label id="5">Fourth</label> 
<label id="6">Fifth</label> 
<label id="7">Fifth</label> 
<label id="8">Fifth</label> 

陣列

X1 
X2 
X3 
X4 
X5 

如何通過形式循環，得到它的標籤列表，並添加文字可以在標籤中跨度的列表。還要檢查文本是否以某些文本開頭（以檢查重複項）並預先設置第一個元素的相同值。如在下面實施例中所述，最終劑型必須是這樣的：

<label id="1"><span>X1</span>First</label> 
<label id="2"><span>X2</span>Second</label> 
<label id="3"><span>X2</span>Second</label> 
<label id="4"><span>X3</span>Third</label> 
<label id="5"><span>X4</span>Fourth</label> 
<label id="6"><span>X5</span>Fifth</label> 
<label id="7"><span>X5</span>Fifth</label> 
<label id="8"><span>X5</span>Fifth</label> 

Answer 1

使用each和html方法來迭代和獲取/設置的元件的HTML。我建議在字符串和這些值之間有一個映射，而不是使用X...值。看下面的例子：

var map = { 
 
    "First": "X1", 
 
    "Second": "X2", 
 
    "Third": "X3", 
 
    "Fourth": "X4", 
 
    "Fifth": "X5" 
 
}; 
 
$("label").each(function (i) { 
 
    var $this = $(this) 
 
    var html = $this.html(); 
 
    var newText = map[html]; 
 
    
 
    $this.html("<span>" + newText + "</span> " + html); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="1">First</label> 
 
<label id="2">Second</label> 
 
<label id="3">Second</label> 
 
<label id="4">Third</label> 
 
<label id="5">Fourth</label> 
 
<label id="6">Fifth</label> 
 
<label id="7">Fifth</label> 
 
<label id="8">Fifth</label>

作爲替代方案，您可能需要使用prepend功能添加span元素：

$this.prepend("<span>" + newText + "</span> "); 

Answer 2

使用jQuery的.each和.prepend功能。

例如，這將工作：

<script> 
    var arr = [ 'X1', 'X2', 'X3', 'X4', 'X5' ]; 
    $(document).ready(function(){ 
     $("label").each(function (index) { 
      $(this).prepend("<span>" + arr[index] + "</span>"); 
     }); 
    }); 
</script> 

你可以做到這一點更簡單且無需維護陣列：

<script> 
    $(document).ready(function(){ 
     $("label").each(function (index) { 
      var t = index+1; 
      $(this).prepend("<span>X" + t + "</span>"); 
     }); 
    }); 
</script> 

更新： 注意，此解決方案僅適用連續鍵（1-9）的數字數組。如果您需要另一個訂單（「您的問題中的1,2,2,4,5,5,5」），我建議您遵循IonicăBizău提出的解決方案。