选择多个li,它是使用jquery的第一个孩子
我正在尝试将onclick
事件添加到特定li
的某个标记,该标记在ul
的编号为#nav
之下。选择多个li,它是使用jquery的第一个孩子
HTML结构:
<ul id="nav">
<li><a href="#">link1</a></li>
<li>
<a href="#">link2</a>
<ul>
<li><a href="#">innerlink1</a></li>
<li><a href="#">innerlink2</a></li>
</ul>
</li>
<li><a href="#">link3</a></li>
<li>
<a href="#">link4</a>
<ul>
<li><a href="#">innerlink1</a></li>
<li><a href="#">innerlink2</a></li>
</ul>
</li>
</ul>
jQuery的
$(document).ready(function() {
$("ul#nav li").eq(1).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
$("ul#nav li").eq(5).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
});
如果你看到的,我写的jQuery两次选择已经得到了另一个ul
里面的一个li
项目的元素和onclick
事件添加到它。这工作正常。但是有没有办法减少我的代码并使其更加干净?
所以,你不希望李包含一个UL孩子,所以我认为这会是这样
$('#nav li:has(>ul)').click(function (event) {
event.preventDefault();
alert('click');
});
小提琴可以发现火灾click事件这里:http://jsfiddle.net/552T4/3/
非常感谢。这对我工作:) – user3531929
哦,等等,我的内链现在不工作。我尝试了“$('#nav li:has(> ul)')。children()。first()”,但这只适用于第一个li。 – user3531929
好吧,如果我错了,请纠正我,但是您是否想要停止“li”元素或“a”元素上的点击事件?如果是“a”元素,则修改小提琴:http://jsfiddle.net/552T4/6/ – Johann
$("ul#nav li:eq(1),ul#nav li:eq(5)").children().click(function(){
e.preventDefault();
var youClicked=$(this).text();
alert(youClicked);
});
感谢您的解决方案。但是这只返回第一个链接。 – user3531929
确定删除.first()....我已更新@ user3531929 – Tuhin
实际上您的要求不明确... – Tuhin
是的,添加的ID到您需要的元素:
HTML结构:
<ul id="nav">
<li><a href="#">link1</a></li>
<li>
<a href="#" id="liOne">link2</a>
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
<li><a href="#">link3</a></li>
<li>
<a href="#" id="liTwo">link4</a>
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
</ul>
jQuery的
$("#liOne, #liTwo").click(function(e){
e.preventDefault();
return false;
});
甚至一个班级,而不是id
的。
这样,您只需将id/class属性添加到要处理的点击事件的元素上,而不是像那样遍历DOM。
感谢您的解决方案。不幸的是我不能添加id,因为li来自循环。 – user3531929
@ user3531929:啊,那真是太遗憾了:P 另外,请问这个答案的人是否可以解释一下为什么?如果我犯了一个错误,我想从中吸取教训。 虽然这可能不是OP的解决方案,但它适用于用户有能力影响HTML结构化的用例。 – Cerbrus
请试试这个。
$(document).ready(function() {
$("#nav > li").each(function(){
$(this).find('a').attr('onclick', 'return false;');
});
});
下面是这个的小提琴。
在上面我申请 “的onclick” 事件到所有的锚。如果你只想应用那个有孩子的李,那么代码就是这样的。
$(document).ready(function() {
$("#nav > li").each(function(){
if($(this).find('ul').length>0)
{
$(this).find('a').attr('onclick', 'return false;');
}
});
});
下面是LI与UI元素选择的链接。
现在,您正在将'onclick'应用于_all_'#nav> li a''元素。这就是所有的锚点,而不仅仅是OP想要的锚点。 – Cerbrus
@Cerbrus是的,我申请了所有的主播。如果你只想要第一个,那么也可以通过第一个来完成。我更新我的答案,请检查它。 –
@Cerbrus你为什么低估我的回答? –
'$(this).attr('onclick','return false;');'这种反模式在你的代码中做了什么?去掉它。 – undefined
你是什么意思反模式?你能解释一下吗?我想学习。 – user3531929
我的意思是使用jQuery设置html事件属性是一个坏主意,除了根据[关注点分离](http:// *。问题/问题/ 98734 /什么是分离关注)原则。在你的代码中'return false'做你想要的,它阻止事件的默认动作并停止它的传播。 – undefined