Question

我有一个自动生成的表格，因此无法把手放在其中。我想知道的是，我能否以某种方式将元素的“ href”带入并呈现为好像它是“ li”的类或id，以便能够使用css处理它？ / p>

<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>

简而言之，结果应该是

<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>

我在网上找不到太多。你知道这样做的方法吗？预先感谢大家。

Answer 1

我可以将元素的“ href”带入并呈现为好像是“ li”的类或id一样，以便能够使用css处理它吗？

是的，您可以使用属性选择器和jQuery 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>

Answer 2

$('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>

Answer 3

您可以像这样使用CSS属性选择器：

[href="#section3"] {
    // css here
}

或者，您可以从href属性中使用jQuery创建ID：

const ID = $('li').attr('href');
$('li').attr('id', ID);

Answer 4

您要的是父选择器。最后我听说这是不可能的。选择<a />元素后，将无法遍历DOM。您的选择是：

将css应用于锚元素
找到一种通过后端将类添加到列表元素的方法
如上一个答案所述，使用js将类动态添加到列表元素。

将类添加到带有“ a”的href的“ li”中

4 个答案: