CODEWITHSUNDEEP
jqueryhtmlcss
Luca Belletti
Luca Belletti

Reputation: 103

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?

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

Upvotes: 0

Views: 1763

Answers (4)

Harsh Madaiyar
Harsh Madaiyar

Reputation: 166

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

Upvotes: 0

Hristo Hristov
Hristo Hristov

Reputation: 111

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. Your options are:

  • Apply css to the anchor elements
  • 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.

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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 : 

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

Upvotes: 1

Matt
Matt

Reputation: 1570

You could just use a CSS attribute selector like so:

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

Alternatively, you could create ID's using jQuery from the href attribute:

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

Upvotes: 0

Related Questions