Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.09.2014, 16:31
Аспирант
Отправить личное сообщение для skillful Посмотреть профиль Найти все сообщения от skillful
 
Регистрация: 18.09.2012
Сообщений: 55

Изменить список средствами jQuery
Здравствуйте.

Помогите решить проблемку.
Имеется вот такой список на странице:
<ul class="nav" id="abc1">
  <li id="tabsli0">
    <a href="" title="">
      <span>1111</span>
    </a>
  </li>
  <li class="" id="tabsli1">
    <a href="" title="">
      <span>2222</span>
    </a>
  </li>
  <li id="tabsli2">
    <a href="" title="">
      <span>3333</span>
    </a>
  </li>
  <li id="tabsli3">
    <a href="" title="">
      <span>4444</span>
    </a>
  </li>
  <li id="tabsli4">
    <a href="" title="">
      <span>5555</span>
    </a>
  </li>
  <li id="tabsli5">
    <a href="" title="">
      <span>6666</span>
    </a>
  </li>
  <li id="tabsli6">
    <a href="" title="">
      <span>7777</span>
    </a>
  </li>
  <li id="tabsli7">
    <a href="" title="">
      <span>8888</span>
    </a>
  </li>
  <li id="tabsli8">
    <a href="" title="">
      <span>9999</span>
    </a>
  </li>
  <li id="tabsli9">
    <a href="" title="">
      <span>1010</span>
    </a>
  </li>
</ul>


Как средствами jQuery изменить его на вот такой вот список:
<ul class="nav" id="abc1">
  <li id="tabsli0">
    <a href="" title="">
      <span>1111</span>
    </a>
  </li>
  <li class="" id="tabsli1">
    <a href="" title="">
      <span>2222</span>
    </a>
  </li>
  <li id="tabsli2">
    <a href="" title="">
      <span>3333</span>
    </a>
  </li>
  <li id="tabsli3">
    <a href="" title="">
      <span>4444</span>
    </a>
  </li>
  <li id="tabsli4">
    <a href="" title="">
      <span>5555</span>
    </a>
  </li>
  <li id="tabsli5">
    <a href="" title="">
      <span>6666</span>
    </a>
  </li>
  <li id="tabsli6">
    <a href="" title="">
      <span>7777</span>
    </a>
  </li>
  <li>
    <a href="#">+++++</a>
        <ul class="sub">
               <li id="tabsli7">
                  <a href="" title="">
                      <span>8888</span>
                  </a>
                </li>
                <li id="tabsli8">
                   <a href="" title="">
                      <span>9999</span>
                   </a>
                 </li>
                 <li id="tabsli9">
                     <a href="" title="">
                         <span>1010</span>
                     </a>
                  </li>
         </ul>
  </li>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 21.09.2014, 19:56
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,129

skillful, средствами html это делается, а не jquery.
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2014, 09:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,327

Сообщение от skillful
Как средствами jQuery изменить его на вот такой вот список
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	var oli=$('#abc1 > li');
	$('#abc1').append('<li></li>');
	var o=$('#abc1 > li:last');
	o.append('<a href="#">+++++</a>')
	o.append('<ul class="sub"></ul>');
	o=$('#abc1 > li:last > ul');
	for (var i=1; i<4; i++) {
		o.append(oli.eq(oli.length-i));
	};
});
</script>
</head>
<body>
<ul class="nav" id="abc1">
	<li id="tabsli0">
		<a href="" title="">
			<span>1111</span>
		</a>
	</li>
	<li class="" id="tabsli1">
		<a href="" title="">
			<span>2222</span>
		</a>
	</li>
	<li id="tabsli2">
		<a href="" title="">
			<span>3333</span>
		</a>
	</li>
	<li id="tabsli3">
		<a href="" title="">
			<span>4444</span>
		</a>
	</li>
	<li id="tabsli4">
		<a href="" title="">
			<span>5555</span>
		</a>
	</li>
	<li id="tabsli5">
		<a href="" title="">
			<span>6666</span>
		</a>
	</li>
	<li id="tabsli6">
		<a href="" title="">
			<span>7777</span>
		</a>
	</li>
	<li id="tabsli7">
		<a href="" title="">
			<span>8888</span>
		</a>
	</li>
	<li id="tabsli8">
		<a href="" title="">
			<span>9999</span>
		</a>
	</li>
	<li id="tabsli9">
		<a href="" title="">
			<span>1010</span>
		</a>
	</li>
	</ul>
</body>
</html>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 22.09.2014, 12:28
Аспирант
Отправить личное сообщение для skillful Посмотреть профиль Найти все сообщения от skillful
 
Регистрация: 18.09.2012
Сообщений: 55

Сообщение от ksa Посмотреть сообщение
Как вариант...

<script type='text/javascript'>
$(function (){
	var oli=$('#abc1 > li');
	$('#abc1').append('<li></li>');
	var o=$('#abc1 > li:last');
	o.append('<a href="#">+++++</a>')
	o.append('<ul class="sub"></ul>');
	o=$('#abc1 > li:last > ul');
	for (var i=1; i<4; i++) {
		o.append(oli.eq(oli.length-i));
	};
});
</script>
Спасибо. Ваш код работает, но чуть-чуть не так как надо. Он выводит список вконце:
1010
9999
8888

а нужно:
8888
9999
1010
Что в этом коде подправить надо?
Ответить с цитированием
  #5 (permalink)  
Старый 22.09.2014, 12:58
Аспирант
Отправить личное сообщение для skillful Посмотреть профиль Найти все сообщения от skillful
 
Регистрация: 18.09.2012
Сообщений: 55

Сообщение от skillful Посмотреть сообщение
Спасибо. Ваш код работает, но чуть-чуть не так как надо. Он выводит список вконце:
1010
9999
8888

а нужно:
8888
9999
1010
Что в этом коде подправить надо?
Сам разобрался
o.prepend(oli.eq(oli.length-i));

ksa, Еще раз спасибо большое!!!!
Ответить с цитированием
  #6 (permalink)  
Старый 22.09.2014, 13:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,327

Сообщение от skillful
Сам разобрался
Уже хорошо...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как воспроизвести звук средствами Jquery? free_style jQuery 2 11.09.2014 15:59
как изменить атрибут onsubmit в форме средствами jquery imediasun1 Элементы интерфейса 2 21.04.2014 18:10
Ниспадающий список и jquery Lena_88 Элементы интерфейса 4 25.12.2013 18:35
Как изменить размер всех видео (iframe) разом через jQuery? dhorh Элементы интерфейса 2 29.12.2012 17:41
Каскадный список + jquery 1.4.2 bobo123456 jQuery 0 02.04.2010 20:59