Форум

jeysmook · #1 (**permalink**) 27.05.2012, 11:19

Нужно найти числовое количество элементов LI в списке. Помогите пожалуйста.

<ul class="list">
<li><a href="#">Главная</li>
<li><a href="#">Главная</li>
<li><a href="#">Главная</li>
<li><a href="#">Главная</li>
<li><a href="#">Главная</li>
<li><a href="#">Главная</li>
</ul>

an.semionov · #2 (**permalink**) 27.05.2012, 11:29

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
		$(function(){
			var countLi = $('ul.list li').size();
			alert(countLi);
		});		
    </script>
</head>
<body>
    <ul class="list">
			<li><a href="#">Главная</li>
			<li><a href="#">Главная</li>
			<li><a href="#">Главная</li>
			<li><a href="#">Главная</li>
			<li><a href="#">Главная</li>
			<li><a href="#">Главная</li>
	</ul>
</body>
</html>

jeysmook · #3 (**permalink**) 27.05.2012, 11:30

an.semionov,
Спасибо большое )

SpiritAbsolute · #4 (**permalink**) 18.07.2014, 13:50

Получить количество это пол дела! А как работать с какой нибудь лишкой этого списка, указав ее позицию в этом количестве? Например, тут общее количество 6 LI, как мне в li номер 3 вставить какой нибудь класс, или id. В общем начать работать с любым элементом по его позиции.

Sweet · #5 (**permalink**) 18.07.2014, 14:18

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

А как работать с какой нибудь лишкой этого списка, указав ее позицию в этом количестве?

Нахер лишку. Научись работать с документацией и гуглом.
Ввёл в гугл "получить элемент jquery". Первым выдало ссылку на документацию, вторым - на статью с сайта.

рони · #6 (**permalink**) 18.07.2014, 14:20

SpiritAbsolute,
http://api.jquery.com/eq/

SpiritAbsolute · #7 (**permalink**) 18.07.2014, 14:24

ага вот про eq() тоже нашел, сделал так

for (var i=1; i<$('#tg-menu > li').size(); i++){
			if($('#tg-menu > li:eq('+i+')').prop('class')=='ui-menu-item ui-state-focus'){
				var position = i;
			}
		}
		console.log(position);

рони · #8 (**permalink**) 18.07.2014, 14:35

SpiritAbsolute,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
<ul id="tg-menu">
  <li></li>
  <li></li>
  <li class="ui-menu-item ui-state-focus"></li>
</ul>
<script>
 var i = $('#tg-menu > li').index($('li.ui-menu-item.ui-state-focus')) ;
 alert(i)
</script>
</body>

</html>

SpiritAbsolute · #9 (**permalink**) 18.07.2014, 14:50

Да, ништяк! спасибо, еще лучше вариант

SpiritAbsolute · #10 (**permalink**) 18.07.2014, 15:10

В итоге в общем получилось так.
Стояла задача, отслеживать изменения select , который стилизован с помощью jquery ui.
Получалось так, jquery ui генерировал свою структуру span, ul, li - не трогая <select>(просто скрывая его через display:none

В результате, не возможно было отследить изменение select`a и получить его значение, для дальнейших действий.

/*
#tg - ID <select>, в котором нужно отследить изменения
#tg-menu - ID <ul>, который Jquery UI присваивает после формирования ul списка с значениями <select>
*/
// Отслеживаем клик по элементу(LI), который формирует Jquery UI после клика на span, которым он заменяет select
$('body').on('click', '.ui-menu-item', function() {
	// Определяем позицию выбранного элемента(LI), по классу 'ui-state-focus', с помощью index()
	var position=$('#tg-menu > li').index($('li.ui-state-focus'));
	// Получив позицию, узнаем в какой позиции находится нужный, для изменения, <option> и делаем его выбранным.
	for (var i=1; i<$('#tg > option').size(); i++){
		if(i==position){
			$('#tg > option:eq('+position+')').prop("selected", "selected");
		}
	}
	// Получаем значение выбранного <select>
	var tg = $('#tg').val();
});

Форум

Справочник

Discord чат

Курсы javascript