Assign a class to the "li" element containing an "a" tag with the specified href attribute

Question

Assign a class to the "li" element containing an "a" tag with the specified href attribute

Is it possible to transform the "href" attribute of an element into a class or id like "li" for better css handling?

<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 other words, can we change the structure to:

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

If you know a solution, please share. Thank you!

jquery html css

Answer 1

Answer №1

Is it possible to take the "href" attribute of an element and treat it like a class or id of "li" in order to style it with css?

Yes, you can achieve this using attribute selectors and jQuery's closest() method like so:

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

Is it possible to take the "href" attribute of an element and treat it like a class or id of "li" in order to style it with css?

Yes, you can achieve this using attribute selectors and jQuery's closest() method like so:

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

Answer №2

To easily style elements based on specific attributes, you can utilize a CSS attribute selector:

[data-key="section3"] {
    // your styles here
}

Another approach is to generate IDs dynamically using jQuery by extracting the href attribute:

const linkID = $('a').attr('href');
$('a').attr('id', linkID);

Answer 4

To easily style elements based on specific attributes, you can utilize a CSS attribute selector:

[data-key="section3"] {
    // your styles here
}

Another approach is to generate IDs dynamically using jQuery by extracting the href attribute:

const linkID = $('a').attr('href');
$('a').attr('id', linkID);

Answer 5

Answer №3

The functionality you are seeking is a parent selector, but unfortunately it has not been implemented yet. Once you have selected the <a /> element, navigating back up the DOM structure is not supported. Here are some alternatives to achieve your desired outcome:

Apply CSS directly to the anchor elements
Explore options for adding classes to the list element through the backend
Utilize JavaScript to dynamically add classes to the list element, as mentioned in an earlier response

Answer 6

The functionality you are seeking is a parent selector, but unfortunately it has not been implemented yet. Once you have selected the <a /> element, navigating back up the DOM structure is not supported. Here are some alternatives to achieve your desired outcome:

Apply CSS directly to the anchor elements
Explore options for adding classes to the list element through the backend
Utilize JavaScript to dynamically add classes to the list element, as mentioned in an earlier response

Answer 7

Answer №4

$('ul li a').each(function(i)
    {
       var href = $(this).attr('href'); // Grab the 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">uno</span><span></span></a><div class="fp-tooltip fp-right">uno</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 8

$('ul li a').each(function(i)
    {
       var href = $(this).attr('href'); // Grab the 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">uno</span><span></span></a><div class="fp-tooltip fp-right">uno</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>

Assign a class to the "li" element containing an "a" tag with the specified href attribute

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

.htaccess 404 not redirecting properly

What causes the navbar-brand to be hidden on Chrome mobile browsers?

What is the procedure for selecting an element based on its child containing specifically filtered text?

Hovering over the Instagram icon will reveal a stunning visual effect

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

Utilizing timezones with Moment.js

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

premature submission alert on button press

Incorporating jquery-ui in a Rails application does not lead to an error even with a fictional alias

What is the best way to extract content between <span> and the following <p> tag?

What is the best way to bridge the gap between the rows?

Launching a bootstrap modal within another modal

The validation errors in the form of CodeIgniter are not being displayed by the JavaScript variable

Utilize the effectiveness of the Ajax Success Handler for retrieving a distinct JSON entity

Determine the specific element that triggered an event from a group of elements using Hammer

Issue with horizontal navigation in CSS

Trimming Text with JQuery

How can I load only specific images on a webpage using HTML?

Guide on accessing a local image while setting the background image using JavaScript