Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   получение значений из массива и вставка нового элемента (https://javascript.ru/forum/misc/58704-poluchenie-znachenijj-iz-massiva-i-vstavka-novogo-ehlementa.html)

malefikus13 06.10.2015 10:17

получение значений из массива и вставка нового элемента
 
Народ, если кто может - помогите пожалуйста. Я только учусь, так что сильно не пинайте. :)

И так, что вообще у меня есть:

- массив следующего вида:

mass = [tr.link_group_header, tr.link_group_header, tr.link_group_header]

На разных страницах содержание массива разное, верней оно одинаковое, но повторяется разное кол-во раз. на одной странице оно может быть таким:

[tr.link_group_header, tr.link_group_header, tr.link_group_header]

а на другой таким:

[tr.link_group_header, tr.link_group_header, tr.link_group_header, tr.link_group_header, tr.link_group_header]

- Есть переменная "x". Она равняется длине массива "mass". В зависимости от того, сколько элементов в массиве, меняется ее значение в числовом эквиваленте. Т.е. "x", может равняться и "3", и "5" и т.д.

- Так же имеется id="name_"

Как сделать так, чтоб при загрузке страницы в массиве "mass" вставлялся тег <b id="name_1"> перед каждым "tr"? При этом в id подставлялся порядковый номер. Т.е. если на странице в массиве три таких элемента "tr.link_group_header", то для трех "tr" последовательно задастся три id(id="name_1",id="name_2",id="name_3")

Буду очень благодарен за помощь! Хоть направьте в нужную сторону :) Я пока додумался только до следующего:

var mass = document.getElementsByClassName("link_group_header"); //получаем вот такой массив: 
// HTMLCollection
// [tr.link_group_header, tr.link_group_header, tr.link_group_header, tr.link_group_header, tr.link_group_header, tr.link_group_header]

var kol = mass.length; // получаем кол-во элементов в полученном массиве. Эта цифра будет определять кол-во порядковых номеров в id'шниках
var link_pref = "link_"; // создаем переменную с основой класса
var link_nomber = тут какая-то магия, теоритически, тут может использоваться переменная "kol"; // создаем переменную с генерирующимся порядковым номером для класса
var link_full = link_pref + link_nomber; // создаем переменную с полным классом, склеив основу и порядковый номер

и вот тут должна произойти основная магия по вставлению тега с айдишником.

laimas 06.10.2015 10:47

Массив зачем нужен или ваш скрипт занимается не контентом а массивом?

malefikus13 06.10.2015 10:56

Цитата:

Сообщение от laimas (Сообщение 390949)
Массив зачем нужен или ваш скрипт занимается не контентом а массивом?

Дело в том, что данный массив, представляет из себя n-ое кол-во заголовков в таблице. Всех их объединяет один и тот же класс. Мне необходимо повесить на каждый заголовок якорь. В примере я указал тег b, так как есть у меня и схожая задача в параллельном проекте.

ksa 06.10.2015 11:38

malefikus13, чем так мутить с "объяснением", просто сделай тестовый пример. На нем покажи, что нужно получить в итоге.
Поскольку объясняльщик из тебя ни какой. :D

malefikus13 06.10.2015 11:43

Цитата:

Сообщение от ksa (Сообщение 390960)
malefikus13, чем так мутить с "объяснением", просто сделай тестовый пример. На нем покажи, что нужно получить в итоге.
Поскольку объясняльщик из тебя ни какой. :D

Хахах)) Это да - не поспоришь :)
Вот тут выложил то, что сейчас накидал:
http://jsfiddle.net/malefikus13/rc36ry9q/

В общем на выходе, "Контактная информация", "Семейное положение" и "Занятость" должны приобрести вот такой вид:
<tr class="link_group_header"><td colspan="3"><section id="link_1"><p>Контактная информация</p></section></td></tr>
<tr class="link_group_header"><td colspan="2"><section id="link_2"><p>Семейное положение</p></section></td></tr>
<tr class="link_group_header"><td colspan="2"><section id="link_3"><p>Занятость</p></section></td></tr>

malefikus13 06.10.2015 11:44

Цитата:

Сообщение от ksa (Сообщение 390960)
malefikus13, чем так мутить с "объяснением", просто сделай тестовый пример. На нем покажи, что нужно получить в итоге.
Поскольку объясняльщик из тебя ни какой. :D

а насчет объяснений - да, что - то я намудрил и сам запутался в том, что написал :D

ksa 06.10.2015 11:53

Цитата:

Сообщение от malefikus13
Вот тут выложил то, что сейчас накидал

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('.link_group_header p').each(function(Index){
		$(this).wrap("<section id='link_"+Index+"'></section>");
	})
});
</script>
</head>
<body>
<table>
	<tr class="link_group_header"><td colspan="3"><p>Контактная информация</p></td></tr>
	<tr class="link_group_header"><td colspan="2"><p>Семейное положение</p></td></tr>
	<tr class="link_group_header"><td colspan="2"><p>Занятость</p></td></tr>
</table>
</body>
</html>

malefikus13 06.10.2015 11:56

Цитата:

Сообщение от ksa
Как вариант...

Во! Спасибо огромное! То, что нужно! Низкий поклон :)


Часовой пояс GMT +3, время: 12:14.