只針對眾多中的自己
1
2
3
4
5
|
<ul class="menu">
<li>蘋果</li>
<li>香蕉</li>
<li>鳳梨</li>
</ul>
|
1
2
3
|
.active{
background-color: red;
}
|
1
2
3
|
$(".menu li").click(function(){
$(this).addClass("active");
});
|
只會對點擊的li進行作用，其他li則不影響
抓取點擊目標的文字
1
2
3
4
5
6
|
<ul class="menu">
<li>蘋果</li>
<li>香蕉</li>
<li>鳳梨</li>
</ul>
<p>你點擊的是：<span class="item-name"></span></p>
|
1
2
3
|
$("li").click(function(){
$(".item-name").text($(this).text());
});
|
$(this).text()沒給值，表示抓取
對上層父元素(parent)
1
2
3
4
5
|
<ul class="menu">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
|
1
2
3
|
.active{
background-color: red;
}
|
1
2
3
|
$(".menu li").click(function(){
$(this).parent().addClass("active");
});
|
點擊li會對ul進行作用
對同層元素(siblings)
1
2
3
4
5
|
<ul class="menu">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
|
1
2
3
|
.active{
background-color: red;
}
|
1
2
3
|
$(".menu li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
|
點擊li套用效果，再點及其他li套用效果，原本的取消
找出下層子元素(find)
1
2
3
4
5
6
7
8
9
10
11
|
<ul class="menu">
<li>項目一
<a>連結一</a>
</li>
<li>項目二
<a>連結二</a>
</li>
<li>項目三
<a>連結三</a>
</li>
</ul>
|
1
2
3
|
.active{
background-color: red;
}
|
1
2
3
|
$(".menu li").click(function(){
$(this).find("a").addClass("active");
});
|
點擊li，對下層的a套用效果
抓取標籤上自訂data的值
1
2
3
4
5
6
|
<ul>
<li data-name="蘋果">項目一</li>
<li data-name="香蕉">項目二</li>
<li data-name="鳳梨">項目三</li>
</ul>
<p>您選擇的是：<span class="data-name"></span></p>
|
1
2
3
4
|
$("li").click(function(){
var dataName = $(this).data("name");
$(".data-name").text(dataName);
});
|
一次抓取多個標籤上自訂data值
1
2
3
4
5
|
<ul>
<li data-num="123"></li>
<li data-num="456"></li>
<li data-num="789"></li>
</ul>
|
1
2
3
4
5
|
$("ul").click(function(){
$("li").each(function(){
var dataNum = $(this).data("num");
})
});
|
其他相關