I need to get value form every list click
Here is my list:
<c:forEach items="${cmlist}" var="records">
<ol class="dd-list" id="chapterlist" >
<li id="cs" class="dd-item" data-id="1" value="${records.levelID}">
<div class="dd-handle">
Chapter: ${records.levelName}
</div>
</li>
</ol>
</c:foreach>
here is my click function code:
$(window).load(function(){
$("#chapterlist li a").on("click", function(){
level = $(this).parent('li').val();
console.log("level"+level);
});
});
Could you please help?
parent() function only goes up one level of DOM, so it gets to your <div> element and stops there. Use parents() instead.
JSFiddle
Note, that val() will only work if value is an integer. Shouldn't be a problem with an ordered list, though, where value is the number of an item.
You cannot use the value method to get the value attribute of this object.
Please, update your jsp by
<c:forEach items="${cmlist}" var="records">
<ol class="dd-list" id="chapterlist" >
<li id="cs" class="dd-item" data-id="1" data-value="${records.levelID}"><div class="dd-handle">Chapter: ${records.levelName} </div>
</li></ol></c:foreach>
And your javascript by
level = $(this).parent('li').data('value');
Fiddle to test this solution
Related
When I put onClick event in button element inside li element like below to make AJAX:
<ul>
<li><button value="orange" onClick="qCat(value)">Orange</button></li>
<li><button value="apple" onClick="qCat(value)">Apple</button></li>
</ul>
It works nicely.
But if I take away button to apply event directly to li element like below make AJAX:
<ul>
<li value="orange" onClick="qCat(value)">Orange</li>
<li value="apple" onClick="qCat(value)">Apple</li>
</ul>
It won't work. Anything wrong with my code? Pls advice. Thanks.
The value attribute of an li element is supposed to be a number. Furthermore it is only supported for Ordered Lists (ol).
The values can even be auto-incrementing by setting the first value to e.g. 100 and then the rest will follow.
If I test your code then the function qCat() receives a 0 (zero) parameter which is consistent with the above.
For additional info see here: https://www.w3schools.com/tags/att_li_value.asp
You just need to change the argument passed to your function (thanks to #epascarello for pointing that out). See the code below.
function qCat(val) {
console.log(val.getAttribute('value'));
}
<ul>
<li value="orange" onClick="qCat(this)">Orange</li>
<li value="apple" onClick="qCat(this)">Apple</li>
</ul>
function First(){
alert('it is the first option');
}
function Second(){
alert('it is the second option');
}
function General(){
alert('it is a shared option');
}
<ul>
<li><a href="#" onclick=First();>First option</a></li>
<li><a href="#"onclick=Second();>Second option</a></li>
<li><a href="#"onclick=General();>Third option</a></li>
<li><a href="#"onclick=General();>Forth option</a></li>
</ul>
Please have a look into this updated code.
function qCat(event){
debugger;
console.log($(event.target).attr('value'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li value="orange" onClick="qCat(event)">Orange</li>
<li value="apple" onClick="qCat(event)">Apple</li>
</ul>
The value attribute sets the value of a list item. The following list items will increment from that number.
The value must be a number and can only be used in ordered lists
In order to get the expected result use data-* (a HTML global attribute)
qCat = function(elm){
val = elm.getAttribute('data-value');
alert(val);
}
<ul>
<li data-value="orange" onClick="qCat(this)">Orange</li>
<li data-value="apple" onClick="qCat(this)">Apple</li>
</ul>
I've the following code :
<div class=myClass>
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="">Tata</li>
<li data-value="389" class="">Titi</li>
<li data-value="387" class="">Toto</li
</ul>
</div>
When I'm clicking on 'a' link, I want to simulate a click on the fisrt 'li' with a trigger.
But how to do that ? I'm looking to use triggers, but it seems difficult to use in this case.
Could you help me please ?
You can have a click handler which can select the li based on its data-value attribute like
$('#click').click(function(){
$('.selectMultiList li[data-value="517"]').click()
})
You can do it by calling a JS method:
Click for option Tata
function clickOnOption(activeElement){
$('.selectMultiList li[data-value="'+activeElement+'"]').click();
}
Using jQuery you can make it quite dynamic, just make sure the class and data-item attribute match
As an example I just made it alert the data value. If you change data-item to "titi" it would alert 389
Example:
$('.clicker').on('click', function (e) {
$('.' + $(this).attr('data-item')).trigger('click');
});
$('.library li').on('click', function () {
alert($(this).attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="tata">Tata</li>
<li data-value="389" class="titi">Titi</li>
<li data-value="387" class="toto">Toto</li>
</ul>
</div>
I am working on a node.js application which generates a html page. This html page displays a list of associates built according to the data passed onto this page. A list is built something like as follows:
<ul class="notification-body" style="">
//loop for all assocaite id's passed to this page
<li class="testClass" data-associateid="<%= assocID %>">
<span>
<span class="subject">
<label class="btnClass label label-info">ClickMe!</label>
</span>
</span>
</li>
The generated html src looks something like this:
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">
<li class="testClass" data-associateid="AA02">
<li class="testClass" data-associateid="AA03">
I am trying to get the value of the data attribute using Jquery & I tried the following:
$(".btnClass").click(function(){
console.log($".testClass").attr("data-associateid"));
});
But this outputs'AA01'everytime i click on the btn and I am not getting the expected output in the console:
AA01
AA02
AA03
I tried the following also but it gives me undefined:
$(".btnClass").click(function(){
console.log($(this).find(".testClass").attr("data-associateid"));
});
You need to use jQuery.data().
I've created a jsFiddle to show this working.
I've closed the LI because AR.
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">1</li>
<li class="testClass" data-associateid="AA02">2</li>
<li class="testClass" data-associateid="AA03">3</li>
</ul>
Here's the JavaScript:
$(document).ready(function() {
$('.testClass').on('click', function(){
alert( $(this).data('associateid') );
});
});
Anytime you have an attribute that starts with data-, you can reference the string after the dash as a data container. Here, I'm calling jQuery.data() on an object (the LI) and asking for the data in the container associateID.
What you are currently doing:
$(".btnClass").click(function(){
console.log($(".testClass").attr("data-associateid"));
});
Will match the first instance of .testClass and print the data-associateid attribute. What you seem to want to do is to iterate over all .testClass and print their data-associateid values:
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
Based on your updated HTML you would do this:
$(".btnClass").click(function() {
var id = $(this).parents('.testClass').attr('data-associateid');
console.log(id);
});
This will search the parents of the clicked on .btnClass to find elements with the class .testClass.
To get the data for that instance you simply need to traverse to the parent <li>.
Within an event handler, this is the element that the event occured on. Use closest() to access the parent <li>
$(".btnClass").on('click', function(){
alert( $(this).closest('li').data('associateid') );
});
Assign different classes to your li elements like this:
<ul class="notification-body" style="">
<li class="testClass1" data-associateid="AA01">test 1</li>
<li class="testClass2" data-associateid="AA02">test 2</li>
<li class="testClass3" data-associateid="AA03">test 2</li>
</ul>
Note, that I closed your li and ul tags to have valid HTML.
And then you can select an element with its own class:
console.log($(".testClass2").attr("data-associateid"));
I created a JSFiddle for you:
http://jsfiddle.net/8rLpbk5m/
I had hoped you could do it with just a find but apparently not. You have to use each to loop through all the elements.
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
View it here: http://jsfiddle.net/rt677qp5/
Using .data() is more logical in this case.
$(".btnClass").click(function() {
$(".testClass").each(function() {
alert($(this).data("associateid"));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01"></li>
<li class="testClass" data-associateid="AA02"></li>
<li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>
I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.
Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example
With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle
This should do it.
alert($(this).closest('.heading').attr('id'));
$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})
could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.
I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.
The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.
There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.
My HTML is:
<!-- coaches box -->
<div class="box">
<div class="heading">
<h3 id="coaches-heading">Coaches</h3>
<a id="coaches" class="filter-align-right">clear all</a>
</div>
<ul id="coaches-list" class="list">
<li><span>Hue Jackson<a class="close"></a></span></li>
<li class="red"><span>Steve Mariuchi<a class="close"></a> </span></li>
</ul>
</div>
<!-- players box -->
<div class="box">
<div class="heading">
<h3 id="players-heading">Players</h3>
<a id="players" class="filter-align-right">clear all</a>
</div>
<ul id="players-list" class="list">
<li><span>Steve Young<a class="close"></a></span></li>
<li><span>Gary Plummer<a class="close"></a></span></li>
<li><span>Jerry Rice<a class="close"></a></span></li>
</ul>
</div>
My remove tag function in jQuery is:
function removeSingleTag() {
$(".close").click(function() {
var $currentId = $(".close").closest("ul").attr("id");
alert($currentId);
// find the closest li element and remove it
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
return;
});
});
}
Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:
var $currentId = $(".close").closest("ul").attr("id");
It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>
If I change that to:
var $currentId = $(".close").parents("ul").attr("id");
It has the same behavior as above, but alerts 'players-list', instead.
So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.
Anyone know what is going on with this whacky behavior?
It's expected behavior.
You should use:
var $currentId = $(this).closest("ul").attr("id");
$(this) points at the clicked .close.
$(".close") points at the first one found.
It's because you run that selector from click handler you should use this instead:
var $currentId = $(this).closest("ul").attr("id");
Try using this function to get the parent:
var $currentId = $(this).parents().first();
I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.
You also need to make it so that it selects the current element by using $(this)