将类添加到带有“ a”的href的“ li”中
[英]add class to “li” with the href of a “a” inside
问题描述
I have an automatically generated table, so I can not put my hand in it. 
我有一个自动生成的表格，因此无法把手放在其中。 What I was wondering was, in one way or another, can I take the "href" of the element to and render it as if it were a class or id of "li" in order to be able to handle it with css? 我想知道的是，我能否以某种方式使用元素的“ href”并将其呈现为“ li”的类或id，以便能够使用css处理它？
<ul>
<li><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">due</div></li>
<li><a href="#section4"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">tre</div></li>
<li><a href="#section5"><span class="fp-sr-only">quattro</span><span></span></a><div class="fp-tooltip fp-right">noBar</div></li>
</ul>
in short, the result should be 简而言之，结果应该是
<ul>
<li class="section3"><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">due</div></li>
<li class="section4"><a href="#section4"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">tre</div></li>
<li class="section5"><a href="#section5"><span class="fp-sr-only">quattro</span><span></span></a><div class="fp-tooltip fp-right">noBar</div></li>
</ul>
I have not found much online. 我在网上找不到太多。 Do you know a method to do it? 你知道这样做的方法吗？ Thanks in advance to everyone. 在此先感谢大家。
4 个解决方案
解决方案1
1 已采纳 2018-12-04 10:11:47
can I take the "href" of the element to and render it as if it were a class or id of "li" in order to be able to handle it with css?
Yes you could do that using attribute selector and the jQuery closest() method like : 是的，您可以使用属性选择器和jQuery closest()的close closest()方法来实现：
$('a[href="#section4"]').closest('li').css('background-color', 'green');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <a href="#section3"> <span class="fp-sr-only">due</span> <span></span> </a> <div class="fp-tooltip fp-right">due</div> </li> <li> <a href="#section4"> <span class="fp-sr-only">due</span> <span></span> </a> <div class="fp-tooltip fp-right">tre</div> </li> <li> <a href="#section5"> <span class="fp-sr-only">quattro</span> <span></span> </a> <div class="fp-tooltip fp-right">noBar</div> </li> </ul>
解决方案2
1 2018-12-04 10:19:00
$('ul li a').each(function(i) { var href = $(this).attr('href'); // This is your rel value var clsname = href.replace("#",""); console.log("href",clsname); $(this).parent().attr("class",clsname); });
<html class="has-navbar-fixed-top"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/test.js"></script> </head> <body> <ul> <li><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">due</div></li> <li><a href="#section4"><span class="fp-sr-only">due</span><span></span></a><div class="fp-tooltip fp-right">tre</div></li> <li><a href="#section5"><span class="fp-sr-only">quattro</span><span></span></a><div class="fp-tooltip fp-right">noBar</div></li> </ul> </body> </html>
解决方案3
0 2018-12-04 10:11:36
You could just use a CSS attribute selector like so: 您可以只使用CSS属性选择器，如下所示：
[href="#section3"] {
// css here
}
Alternatively, you could create ID's using jQuery from the href attribute: 或者，您可以从href属性使用jQuery创建ID：
const ID = $('li').attr('href');
$('li').attr('id', ID);
解决方案4
0 2018-12-04 10:14:05
What you are asking for is a parent selector. 您要的是父选择器。 Last I heard this is not possible. 最后我听说这是不可能的。 Once you select the <a /> element, you can't traverse back up the DOM. 选择<a />元素后，将无法遍历DOM。 Your options are: 您的选择是：
- Apply css to the anchor elements 将CSS应用于锚元素
- Find a way to add classes to the list element through the backend 找到一种通过后端将类添加到列表元素的方法
- Use js to dynamically add classes to the list element, as stated in a previous answer. 如上一个答案所述，使用js将类动态添加到list元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.