我想访问和修改li下的元素。
基本上,我想通过访问li来访问标签
HTML:
<ul>
<li data-id="1">
<a href="#">Data 1</a>
</li>
<li data-id="2">
<a href="#">Data 2</a>
</li>
<ul/>
js
var number = '1';
var my_li = $('li[data-id="' + number + '"]');
my_li.a.css('color', 'red') // i want to change color of anchor tag.
您可以选择其中一种方法来完成
$('li[data-id="' + number + '"] a').css('color', 'red');
$('li[data-id="' + number + '"]').children('a').css('color', 'red');
var my_li = $('li[data-id="' + number + '"]');
my_li.children('a').css('color', 'red')
如上所述,您可以使用$(selector).children(filter)
var my_li = $('li[data-id="' + number + '"]').children().css({"color": "red"});
更新这里是工作小提琴:
$(document).ready(function(){
$("ul").children().css({"color": "red"});
});
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="descendants">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)</span>
</li>
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
你可以试试这个:
$("a", my_li).css({color: 'red'});