从ul li jquery获取选定的项目 [英] Getting selected item from ul li jquery
问题描述
您好,我正在动态地为ul-li HTML标签添加一个列表。我需要的是获得相应ul的选定li的价值。我尝试了所有可能的jQuery方法,但仍然得到了undefined.I填充ul-li为:
jQuery.get (url,function(data){
for(i = 0; i< data.length; i ++){
//console.log(data[i])//+ data [i] +
msg =< li>< a href =#>+ data [i] +< / a>< / li>;
document.querySelector #option1')。innerHTML + = msg;
}
});
HTML部分为:
<身体GT;
< div class =wrap>
< div class =content>
< div class =cate-map>
< ul id =option1onclick =doSelection()>
< / ul>
< / div>
< / div>
< div class =content2>
< div class =cate-map>
< ul id =option2>
< / ul>
< / div>
< / div>
< div class =clear>< / div>
< div class =content3> < textarea id =content4>< / textarea>
< / div>
< / div>
< / body>
onclick方法如下:
函数doSelection(){
var id = $('#option1 li.selected')。attr('value');
alert(id);
}
问题在于我得到'未定义'的id值。
更新
正如你所有的建议我改变我的代码为:
将ul填充为:
jQuery.get(url,function(data){
for(i = 0; i msg =< data-input =+ data [i] +class ='selected'>< a href =#>+ data [i] +< / a>< / li>;
document.querySelector('#option1')。innerHTML + = msg;
}
});
HTML ul:
< div class =cate-map>
< ul id =option1onclick =doSelection()>
< / ul>
< / div>
Onclick的功能如下:
function doSelection(){
alert($('#option1 li.selected')。attr('data-input'));
$ b $ p
$ b现在我得到了一个警报值,作为警报的第一个元素总是。无论点击哪个元素仍然会获得列表的第一个元素。如果您在@FrédéricHamidi value $ c>的评论中看到这一点,请参阅 当它与 ul
一起使用时,$ c>属性对于 li
不存在,所以最好将自己的属性添加到它中。像这样访问它:
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class = wrap>< div class =content> < div class =cate-map> < ul id =option1> < / UL> < / div>< / div>< div class =content2> < div class =cate-map> < ul id =option2> < / UL> < / div>< / div>< div class =content3>< < textarea id =content4>< / textarea>
Hi I am poulating a list in ul - li HTML tag dynamically. All I need is to get value of selected li of corresponding ul. I tried all possible jquery methods I got but still i am getting undefined.I am populating ul - li as:
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
//console.log(data[i]) //"+data[i]+"
msg = "<li> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML section is as:
<body>
<div class="wrap">
<div class="content">
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
</div>
<div class="content2">
<div class="cate-map">
<ul id="option2">
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content3"> <textarea id="content4"></textarea>
</div>
</div>
</body>
onclick method is as :
function doSelection(){
var id = $('#option1 li.selected').attr('value');
alert(id);
}
Problem is that I am getting 'undefined' for id value.
UPDATE
As you all suggested I changed my code as:
Populating ul as:
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML ul as:
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
Onclick function as:
function doSelection(){
alert($('#option1 li.selected').attr('data-input'));
}
Now I am getting a value as alert but I am getting the first element as alert always. Whichever element I click still always getting the first element of list. Please do help.
解决方案 As you see in the comment from @Frédéric Hamidi value
attribute is not there for li
when it is used with ul
so better add your own attribute to it then access it like this:
for(i=0;i<4;i++){// use actual data it is just a demo
msg = "<li data-input="+i+" class='selected'> <a href=#>"+i+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
$('#option1 li').click(function(){
//console.log($(this).attr('data-input'));
alert($(this).attr('data-input')); // this will alert data-input value.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="cate-map">
<ul id="option1">
</ul>
</div>
</div>
<div class="content2">
<div class="cate-map">
<ul id="option2">
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content3"> <textarea id="content4"></textarea>
这篇关于从ul li jquery获取选定的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!