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>
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.
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.
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.
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;
}
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With