CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cristi
cristi

Reputation: 397

How can I display an alert with the position of the element that was clicked?

I have this example:

link

CODE HTML:

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

CODE CSS:

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

CODE JS:

$("ul li").click( function(event)
{
    var barIndex = $( "ul li" ).index();
    alert("Element poistion:"barIndex);

});

Basically I want to display an alert position dln element list that you click.

Can you tell me please how to solve this problem and why my code does not work?

Thanks in advance!

Upvotes: 0

Views: 91

Answers (1)

rrk
rrk

Reputation: 15846

$("ul li").click(function (event) {
    var barIndex = $("ul li").index($(this)) + 1;
    alert("Element poistion:" + barIndex);
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<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>

Upvotes: 1

Related Questions