How to get number from li list with jquery

JavaScript
1

I’ve a PHP function which would print out the result as below:


<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
<li>Detail 4</li>
<li>Detail 5</li>

Here’s how it end up:


<div id="details">
	<ul>
		<li>Detail 1</li>
		<li>Detail 2</li>
		<li>Detail 3</li>
		<li>Detail 4</li>
		<li>Detail 5</li>
	<ul>
</div>

I want to display the index of that li list in another div like below:


<div id="item-list">
	1 2 3 4 5
</div>

So when I click on the number in the list the corresponding detail show/hide accordingly.
My current solution is that I create another list of five items, but some times the PHP function generates four items and some times three.
So most of the time the list size is not equal.
Here’s my current code:


var myList = $("#details ul").children('li');
$("#item-list li").click(function(e) {
	e.preventDefault();
	e.stopPropagation();
	var id = $(this).index();
	$('#details ul li:eq(' + id + ')').css({'display' : 'block'});
	$('#details ul li:eq(' + id + ')').siblings().css({'display' : 'none'});
});
myList.not(':first').css({'display' : 'none'});

Thank you,

2

hi there.

Why don’t you use the data attribute on the li and then with jquery get the data value

with php add the data attribute to each li and auto increment the number


<li data-indexNum="1">details</li>
<li data-indexNum="2">details</li>
<li data-indexNum="3">details</li>
<li data-indexNum="4">details</li>
<li data-indexNum="5">details</li>

and then with jquery get the number with .data()

3

Or you could do it this way;)

!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>item list</title>
</head>

<body>
<div id="details">
	<ul>
		<li>Detail 1</li>
		<li>Detail 2</li>
		<li>Detail 3</li>
		<li>Detail 4</li>
		<li>Detail 5</li>
	<ul>
</div>

<div id="item-list"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  var myNum = [],
	 x = 1,
	 listNumbers = '';
	
	$('li').each(function(e) {
		myNum[x] = x;
		x += 1;
	}); // End of Count;
	console.log(myNum);
	listNumbers = myNum.join(' ');
	console.log(listNumbers);
	$('#item-list').text(listNumbers);
}); // End of Doc Ready:
</script>
</body>
</html>
4

Hi Strider64,

Good code you have there, but i’m confused does the OP what the amount of li’s or does he what a number assigned to each li so that he can show and hide the selected number? like an accordion menu.

5

If he wants an accordion feature the OP would be better going off with the data-indexNum, I was just trying to show there are more ways of accomplishing a task. Heck, the OP could even do some kind of event.target kind of script to accomplish this. It just how detail a person wants to get.

6

Hi Strider64,

Thanks for your help. That’s the solution I was looking for. I don’t want an accordion. I just want to hide/show divs base on a number clicked.

Here’s my modification:


$('#details ul li').each(function(e) {
	myNum[x] = '<li><a href="#">' + x + '</a></li>';
	x += 1;
});
$('#item-list').html(listNumbers);
7

No need to keep a counter yourself as .each gives you the index of the element. You can use that :slight_smile:


$('#details ul li').each(function(idx) {
	myNum[idx+1] = '<li><a href="#">' + (idx+1) + '</a></li>';
});
$('#item-list').html(listNumbers);

Also, since you’re not interested in what’s in the elements, but merely how many there are you could also just use a for loop.


for (var i=0; i < $('#details ul li').length; i++) {
	myNum[i+1] = '<li><a href="#">' + (i+1) + '</a></li>';
});
$('#item-list').html(listNumbers);

:slight_smile:

8

Thank you ScallioXTX

What I’m trying to do is copying the lower left section of gm.com [The Latest News From GM]. Your code is strange but it works as well.

Edit: not strange though but better. Thanks