Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the value of active li in ul

Tags:

jquery

I am trying to get the active li from a ul in jqvalue but all i am getting is null. I've also tried to write the value of the ul using console dir (to try and simulate php's var_dump but nothing is happening there either

Here is my jfidde: http://jsfiddle.net/#&togetherjs=MDbkUMciB7

Here is the code

function monthly_payment(){
    var interest = $('ul.credit').find('li.active').data('interest');
    console.dir($('ul.credit'));
alert(interest);
      // var iinterest   = interest_rate / 1200;


}


<ul id="credit">
<li interest = "0.056" class="active"><a href="#"><span id="excellent" class="0.056">excellent</span></a></li>
<li interest = "0.099"><a href="#"><span id="good" class="0.099">good</span></a></li>                       <li interest = "0.169"a href="#"><span id="fair" class="0.169">fair</span></a></li>
<li interest = 0.299><a href="#"><span id="bad" class="0.299">bad</span></a></li>
</ul>
like image 266
user2274191 Avatar asked Apr 06 '14 07:04

user2274191


People also ask

How can you tell if UL has Li in a text?

Each of the list elements of the unordered list is first selected using a jQuery selector. The each() method is used on this list to iterate through it. This method has a callback function that returns the current index and the element of the iteration.

How do I click on Li active?

on('click','li',function(){ $(this). addClass("active"); // adding active class }); The above code will add the active class to the li tag whenever the user clicks on the Li element.

How check class is active or not in jQuery?

Method 1: Using hasClass() method: The hasClass() is an inbuilt method in jQuery which check whether the elements with the specified class name exists or not. It returns a boolean value specifying whether the class exists in the element or not. This can be used to check for multiple classes.


2 Answers

Change class to ID i.e li.credit to li#credit and interest to data-interest

HTML

<ul id="credit" name="credit">
            <li data-interest = "0.056" class="active"><a href="#"><span id="excellent" class="0.056">excellent</span></a></li>
            <li data-interest = "0.099"><a href="#"><span id="good" class="0.099">good</span></a></li>                      
           <li data-interest = "0.169"><a href="#"><span id="fair" class="0.169">fair</span></a></li>
            <li data-interest = 0.299><a href="#"><span id="bad" class="0.299">bad</span></a></li>
        </ul>

JQuery

$(function() {
    monthly_payment();
 });


function monthly_payment(){
    var interest = $('ul#credit').find('li.active').data('interest');
    alert(interest);
   console.dir($('ul.credit'));
       var iinterest   = interest_rate / 1200;
       payment = principal * interest / (1 - (Math.pow(1/(1 + interest), monthly_period)));
       payment = Math.round(payment * 100) / 100;
       return payment;

}
like image 75
Shaminder Singh Avatar answered Sep 21 '22 23:09

Shaminder Singh


If you want to use data attributes, then prefix it with data-

Your HTML should be:

<ul id="credit">
<li data-interest = "0.056" class="active"><a href="#"><span id="excellent" class="0.056">excellent</span></a></li>
<li data-interest = "0.099"><a href="#"><span id="good" class="0.099">good</span></a></li>                       <li data-interest = "0.169"a href="#"><span id="fair" class="0.169">fair</span></a></li>
<li data-interest = 0.299><a href="#"><span id="bad" class="0.299">bad</span></a></li>
</ul>

And, as mplungjan, said, class names cannot be started with numbers. It has to start with alphabet.

.1{
 /* bad */
}

.some1{
 /* good */
}
like image 39
Amit Joki Avatar answered Sep 19 '22 23:09

Amit Joki