Найти количество элементов списка
Нужно найти числовое количество элементов 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> |
<!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>
|
an.semionov,
Спасибо большое ) |
Получить количество это пол дела! А как работать с какой нибудь лишкой этого списка, указав ее позицию в этом количестве? Например, тут общее количество 6 LI, как мне в li номер 3 вставить какой нибудь класс, или id. В общем начать работать с любым элементом по его позиции.
|
Цитата:
Ввёл в гугл "получить элемент jquery". Первым выдало ссылку на документацию, вторым - на статью с сайта. |
SpiritAbsolute,
http://api.jquery.com/eq/ |
ага вот про 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);
|
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>
|
Да, ништяк! спасибо, еще лучше вариант :)
|
В итоге в общем получилось так.
Стояла задача, отслеживать изменения 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();
});
|
| Часовой пояс GMT +3, время: 07:12. |