Как преобразовать тексты li в ссылки в javascript случайным образом?

lozinskiy2015

Мне нужно преобразовать список текстов li в ссылки с помощью javascript, 3 ссылки случайным образом. ИЗ ЭТОГО:

 <div class="mytd">


<ul>


<li> list 1</li>


<li> list 2</li>


<li> list 3</li>


<li> list 4</li>


<li> list ..</li>


<li> list 99 </li>


<li> list 100</li>


</li>


</div>


<!-- CONVERT TO LINKS -->


<script type="text/javascript">


function getElementsByClass (className) {


var all = document.all ? document.all :


document.getElementsByTagName('*');


var elements = new Array();


for (var i = 0; i < all.length; i++)


if (all[I].className == className)


elements[elements.length] = all[I];


return elements;


}


function makeLinks(className, url) {


nodes = getElementsByClass(className);


for(var i = 0; i < nodes.length; i++) {


node = nodes[I];


text = node.innerHTML


node.innerHTML = '<a href="' + url + text.toLowerCase().replace(/\bamp\b|[^A-Z0-9]+/ig, "-") + '">' + text + '</a>';


}}


</script>


<!-- CONVERT TO LINKS -->


<script type="text/javascript">


makeLinks("mytd", "mywebsite.com/folder/");


</script>

Код (разметка): К ЭТОМУ:

 <div class="mytd"> <ul> <li> list 1</li> <li> <a href="/folder/"> list 2 </a> list 2</a></li> <li> list 3</li> <li> list 4</li> <li> list ..</li> <li> <a href="/folder/"> list 80 </a> list 80</a></li> <li> <a href="/folder/"> list 82 </a> list 82</a></li> <li> list 100</li> </li> </div>

Код (разметка): Я везде выполняю поиск по переполнению стека, но не могу найти ничего, что соответствует моим потребностям.

Что-то вроде этого:

 <ul> <li> list 1</li> <li> list 2</li> <li> list 3</li> <li> list 4</li> <li> list ..</li> <li> list 80 </li> <li> list 82 </li> <li> list 100</li> </li>

Код (разметка):

tstert

Абсолютно!!! И почему нужно делать это случайным образом? Это будет мешать SEO и вашим посетителям: «Эй, Брэд, посмотри на это, черт возьми, это была ссылка в прошлый раз, интересно, почему меня заблокировали?»

Lord_Prime

1) Разве это не должно быть сделано НА СЕРВЕРНОЙ СТОРОНЕ?

2) Барбара Уолтерс, не 2003 год, можешь перестать говорить type="text/JavaScript"

3) если вам ДЕЙСТВИТЕЛЬНО не нужна поддержка IE6/более ранних версий, вам не нужно создавать запутанный беспорядок с полифилом для getElementsByClassName, он существует.

4) Опять же, в случае с Бабавой Вавой, InternalHTML — это пережиток, использования которого следует избегать.

Это называется DOM, используйте его. 5) в вашей разметке нет классов, которыми можно было бы манипулировать, или идентификатора, по которому можно было бы ее перехватить. 6) Якорь в вашем преобразовании — это ерунда, поскольку вы закрываете дважды, и все они имеют один и тот же URI.

На самом деле вся ваша разметка — это ломаная тарабарщина. Но предположим, что это то, что вам нужно сделать на стороне клиента.

Сначала давайте сделаем некоторую разметку, которую мы сможем перехватить.

 


function makeLinks(parentClass, uri) {


for (


var


i = 0,


matchedLi = document.querySelectorAll('.' + parentClass + ' li'),


li, a, text;


li = matchedLi[i];


i++


) {


a = li.appendChild(document.createElement('a'));


a.href = uri + li.textContent.toLowerCase().trim().replace(/[\W]+/g, '-');


a.appendChild(document.createTextNode(li.textContent));


while (a.previousSibling) li.removeChild(a.previousSibling);


}


}


makeLinks('randomLinks', 'folder/');

Код (разметка): сначала давайте создадим версию, которая преобразует их все в ссылки.

  <ul class="randomLinks"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list ..</li> <li>list 80 </li> <li>list 82 </li> <li>list 100</li> </ul>

Код (разметка): После этого вам не составит труда рандомизировать выполнение только трех из них.

Создайте привязку как элемент DOM, прикрепите ее, установите атрибуты и удалите существующие узлы DOM, используя обход DOM, что в целом быстрее, менее подвержено проблемам и не создает рисков безопасности, связанных с написанием дерпи "innerHTML" - что-то что ИМХО никогда не должно было быть частью JavaScript.

или, по крайней мере, не для записи в "живой" DOM.

Похожие темы	Дата
Илья Кантор] Курс "Разработка интерфейсов" JavaScript или jQuery	19.10.2024, 18:10
Клиентский JavaScript. Руководство	19.10.2024, 18:10
Slider Revolution Responsive Jquery Plugin 5.2.4	19.10.2024, 18:10
Javascript Для Верстальщика (2016)	19.10.2024, 18:10
Илья Кантор ( Javascript.ru ) Курс По Node.js	19.10.2024, 18:10
Ложное значение передается в вызове ajax	19.10.2024, 18:10
Как вы извлекаете данные из динамического идентификатора = uid?	19.10.2024, 18:10
ajax и обратные вызовы	19.10.2024, 18:10
если еще	19.10.2024, 18:10
Все еще не могу понять JS!! Какая цель??!!	19.10.2024, 18:10

Как преобразовать тексты li в ссылки в javascript случайным образом?

lozinskiy2015

tstert

Lord_Prime

I AM

Интересно