Jquery访问li标记下的元素



我想访问和修改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'});

最新更新