Подготовить массив к массиву элементов 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 элементы: .each и .prepend функции

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

Answer 2

Использовать JQuery в.

Например, это будет работать:

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

Update: Заметим, что это решение относится только к числовому массиву с непрерывными ключами (1-9). Если вам нужен другой заказ («1,2,2,3,4,5,5,5», как в вашем вопросе »), я предлагаю вам следовать решению, предложенному Ionică Bizău.