Here is an example I am working on:
HTML CODE:
<ul>
<li id="#bar">
<img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png"width=50 height=50></img>
<p>ELEMENT 1</p>
</li>
<li id="#bar">
<img src="http://whyfiles.org/wp-content/uploads/2013/04/promega_logo.png" width=50 height=50></img>
<p>ELEMENT 2</p>
</li>
<li id="#bar">
<img src="http://bikechicago.com/wp-content/uploads/bikechicago-uber-image-C2.png" width=50 height=50></img>
<p>ELEMENT 3</p>
</li>
<li id="#bar">
<img src="http://coordinate.com.au/wp-content/uploads/2014/06/CBR_Web_Images.jpg" width=50 height=50></img>
<p>ELEMENT 4</p>
</li>
<li id="#bar">
<img src="http://www.bpifrance-lelab.fr/var/bpi/storage/images/media/images/image-couverture/34625-1-fre-FR/image-couverture_large.jpg" width=50 height=50></img>
<p>ELEMENT 5</p>
</li>
<li id="#bar">
<img src="http://odpiralnicasi.com/photos/012/539/image-big.jpg" width=50 height=50></img>
<p>ELEMENT 6</p>
</li>
</ul>
<div class="dreapta">
</div>
CSS CODE:
ul{
list-style-type:none;
width:95px;
float:left;
}
ul li{border-bottom:1px solid;}
p{padding;0;margin:0;}
.dreapta{float:right;width:100px;height:100px;border:1px solid;}
JS CODE:
$("ul li").click( function(event)
{
var barIndex = $( "ul li" ).index();
alert("Element poistion:"barIndex);
});
I am trying to display an alert showing the position of the element in the list that is clicked. Can anyone help me figure out why my code is not working?
Thank you in advance!