Форум Сайтостроение Веб-строительство

вставить тег SPAN перед тегом A и после

R
На сайте с 01.10.2013
Offline
87
Ruson
1022

Здравствуйте имеется пример кода:

<ul class="class_ul">

<li class="class_li"><a href="#">text</a></li>

<li class="class_li"><a href="#">text</a></li>

<li class="class_li"><a href="#">text</a></li>

</ul>

Подскажите как используя только javascript, jquery сделать следющее:

<ul class="class_ul">

<li class="class_li"><span class="class_span_1></span><a href="#">text</a><span class="class_span_2></span></li>

<li class="class_li"><span class="class_span_1></span><a href="#">text</a><span class="class_span_2></span></li>

<li class="class_li"><span class="class_span_1></span><a href="#">text</a><span class="class_span_2></span></li>

</ul>

Тоесть перед и после тегов A вставить теги SPAN с присвоением класов. Тегов li в UL может быть неизвестно сколько.

Спасибо.

olympteka
На сайте с 08.06.2013
Offline
16
olympteka
#1

Вопрос - зачем? Может вам не надо дописывать никаких span, а напрямую работать с cоответствующим LI или A, подменяя класс или добавляя стили

А по сабжу, наверное так:

$('li.class_li').html( '<span class="class_span_1></span>' + $('li.class_li').html() + '<span class="class_span_2></span>' );

M
На сайте с 15.03.2012
Offline
101
Moltisanti
#2

$('a', '.class_li').each(function() {

$(this).after('<span class="class_span_2"></span>');

$(this).before('<span class="class_span_1"></span>');

});

R
На сайте с 01.10.2013
Offline
87
Ruson
#3

Первый вариант не работает + стал некорректно отображать URL 🙅

Второй вариант простой и идеален спасибо Moltisanti! 🍻

Вопрос второй. 🙄

На выходе получили следующий результат:

<ul class="class_ul">

<li class="class_li"><span class="class_span_1></span><a href="#">text</a><span class="class_span_2></span></li>

</ul>

Создали селекторы и присвоили стили CSS

li.class_li {стили 1}

li.class_li a {стили 1}

ul li span.class_span_1 {стили 1}

ul li span.class_span_2 {стили 1}

Добавили псевдокласс hover всем селекторам и присвоили другие стили CSS

li.class_li:hover { стили 2}

li.class_li a:hover { стили 2}

ul li span.class_span_1:hover { стили 2}

ul li span.class_span_2:hover { стили 2}

Вопрос: Как сделать что-бы при наведении на любой из них активировались все 4 псевдокласса hover (каждый соответственно своему классу)? наверно лучше опять таки java так как небоходима корректная работа во всех браузерах.

Не сочтите за наглость :o

Спасибо!

olympteka
На сайте с 08.06.2013
Offline
16
olympteka
#4
Ruson:
Первый вариант не работает + стал некорректно отображать URL 🙅

Странно. У меня такие варианты прокатывают. Но второй способ возьму на вооружение.

R
На сайте с 01.10.2013
Offline
87
Ruson
#5

Помогите пожалуйста разобраться.

http://jsbin.com/ixACUDa/1/edit

или тут то же самое

http://jsfiddle.net/e27Dt/154/

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

Jor
На сайте с 23.06.2012
Offline
42
Jor
#6

CSS: 

<style>



   ul li:first-child {color: green;}

   ul li:first-child+* {color: blue;}

   ul li:first-child+*+* {color: red;}

				

   ul li.hover:first-child {color: red;}

   ul li.hover:first-child+* {color: blue;}

   ul li.hover:first-child+*+* {color: green;}



   ul li.hover:first-child a {color: black;}

   ul li.hover:first-child+* a {color: gray;}

   ul li.hover:first-child+*+* a {color: red;}



</style>

JS: 

<script>

			

   $(document).ready(function() {

      $('li').mouseover(function(){

         $('li').addClass('hover');

      }).mouseout(function(){

         $('li').removeClass('hover');

      });

   });

				

</script>

HTML: 

<body>



   <ul>

      <li>Lorem Ipsum <a href="/">Link</a> text</li>

      <li>Lorem Ipsum <a href="/">Link</a> text</li>

      <li>Lorem Ipsum <a href="/">Link</a> text</li>

   </ul>



</body>
R
На сайте с 01.10.2013
Offline
87
Ruson
#7

Спасибо, почти то что мне надо, уже доделаю сам )

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий