Форум

skillful · #1 (**permalink**) 21.09.2014, 17:31

Здравствуйте.

Помогите решить проблемку.
Имеется вот такой список на странице:

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

Rise · #2 (**permalink**) 21.09.2014, 20:56

skillful, средствами html это делается, а не jquery.

ksa · #3 (**permalink**) 22.09.2014, 10:17

Сообщение от 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>

skillful · #4 (**permalink**) 22.09.2014, 13:28

Сообщение от 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
Что в этом коде подправить надо?

skillful · #5 (**permalink**) 22.09.2014, 13:58

Сообщение от skillful

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

а нужно:
8888
9999
1010
Что в этом коде подправить надо?

Сам разобрался

o.prepend(oli.eq(oli.length-i));

ksa, Еще раз спасибо большое!!!!

ksa · #6 (**permalink**) 22.09.2014, 14:13

Сообщение от skillful

Сам разобрался

Уже хорошо...

Форум

Справочник

Discord чат

Курсы javascript