Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link?

<a href="www.link.com">CATEGORY NAME</a>
                                                                                                                                                                                        <div class="123">
    <div class="categories ">
      <span>Categories:</span>

      <ul>
        <li>
            <a href="https://someweb.com/"> 1 </a>
        </li>
        <li>
            <a href="https://someweb.com/"> 2 this is what i need to select </a>
        </li>
      </ul>
    </div>
 </div>

Thank you in advance for your response! Cheers!

javascripthtmljquerycss

Answer №1

Check out this code snippet:

ul li a[href='https://someweb.com/']:eq(1)


$("ul li a[href='https://someweb.com/']:eq(1)").css("color","blue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <ul>
  <li>
  <a href="https://someweb.com/"> Link 1 </a>
  </li>
  <li>
  <a href="https://someweb.com/"> Link 2 - target element</a>
  </li>
  <li>
  <a href="https://someweb.com/"> Link 3 </a>
  </li>

Answer №2

Are you looking to target a specific URL?

a[href='https://specificWeb.com/']{
 background: red;
 }
<a href="www.link.com">CATEGORY NAME</a>
                                                                                                                                                                                        <div class="123">
    <div class="categories ">
      <span>Categories:</span>
      <ul>
      <li>
      <a href="https://someweb.com/"> 1 </a>
      </li>

      <li>
      <a href="https://specificWeb.com/"> 2 this is what i need to select </a>
      </li>
      
      </ul>
    </div>
  </div>

Consider using classes for a better solution:

.my-target-url {
 background: red;
 
 }
<a href="www.link.com">CATEGORY NAME</a>
                                                                                                                                                                                        <div class="123">
    <div class="categories ">
      <span>Categories:</span>
      <ul>
      <li>
      <a href="https://someweb.com/"> 1 </a>
      </li>

      <li>
      <a class="my-target-url"href="https://specificWeb.com/"> 2 this is what i need to select </a>
      </li>
      
      </ul>
    </div>
  </div>

If URLs are not hardcoded, implement a logic to toggle the class

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Despite successful installation, node remains elusive on Ubuntu VPS

After installing node using NVM with version 0.25.0, I specifically installed node version 0.10.32. However, upon running node -v, the following error is displayed: -bash: /root/.nvm/v0.10.32/bin/node: No such file or directory Similarly, when executing ...

javascriptnode.jsnpmnvm

Have I got it all wrong with the way Controllers communicate with Services and how I conduct unit testing?

Currently, I am in the process of developing an AngularJS application and I want to ensure it follows best practices. When making external API calls using either $resource or $http, I always do this within a separate Service or Factory. However, I am unsur ...

javascriptunit-testingangularjsservicecontroller

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...

phpjqueryhtmlajaxjquery-ui

Interactive React Dropdown Component

As a relatively new React user, I am attempting to develop a custom component that will showcase a list of items within a select menu. The goal is to allow the user to make a selection from the menu and then click an "Add" button below it. Upon clicking th ...

javascriptreactjsreact-bootstrap

Having trouble with the import of the directory's index file?

The code snippet in application.js indicates that the "home" imported from "./routes/index" is undefined. import {home} from "./routes/index" console.log(JSON.stringify(home, null, 4)) This is what index.js contains: export * from "./home.js" And here ...

javascriptnode.jsexpressmoduleecmascript-6

Tips on ensuring Angular calls you back once the view is ready

My issue arises when I update a dropdown list on one of my pages and need to trigger a refresh method on this dropdown upon updating the items. Unfortunately, I am unsure how to capture an event for this specific scenario. It seems like enlisting Angular ...

javascriptjqueryangularjstwitter-bootstrap

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

javascriptangularjshtmlicecast

Converting UTF-16 to UTF-8 in JavaScript: A step-by-step guide

I'm facing a challenge with Base64 encoded data in UTF-16 format. While most libraries only support UTF-8, I need to find a way to decode the data by dropping the null bytes, although I'm not sure how to go about it. Currently, I'm utilizin ...

javascriptutf-8base64utf-16

Which specific page initiates the post request?

Seeking help with my post request that originates from a specific page on my website: reqdata = 'text=' + mytext; $.ajax({ type: "POST", url: "/request.php", data: reqdata, cache: false, success: function(html) { alert(html) } ...

javascriptphpajaxhttp-post

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

Is there a way to modify the edit button to become a save button and include a cancel button?

Is there a way to toggle between an edit button and a save button, along with a cancel option? $('#edit').click(function() { $(this).hide(); $('#save, #cancel').show(); }); $('#cancel').click(function() { $('#ed ...

javascriptjqueryhtml

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

Display a hidden division when a radio button is selected using Javascript and Jquery

Currently, I am in the process of constructing a form that triggers a series of additional questions based on the selected answer. Below is my current working code snippet: $(".appliedWorked").click(function(){ if($(this).val()==="appliedWorkedYes") ...

javascriptjquery

I would greatly appreciate your assistance in creating a regular expression in JavaScript

I need assistance with creating a JavaScript regular expression that matches the format "APL-101". 1) The letters before '-' must be in capital letters, without any special characters, and can be any length. 2) After '-', the string s ...

javascriptregexreactjsstring

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

Incorporate a tall button on the right edge of the division

I have successfully implemented a sidebar with the ability to hide or display it using this link. Now, I am looking to add a clickable bar on the right side of the div that can also trigger the hide/show functionality. After experimenting, I discovered th ...

htmlcsstwitter-bootstrap

The list item click event is not triggered when new list items are added

I've run into a bit of confusion with my code. Everything seems to be working perfectly fine until I introduce new items. Take a look at a sample of my items However, once I make changes to my list, the click function stops working. Check out a sa ...

javascriptjquery

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

Attempting to create a footer design featuring buttons aligned to the left and right sides

I am trying to create a layout similar to the bottom of Google's homepage using this code. However, no matter what I try, the "lists" are still appearing vertically instead of horizontally. My goal is to have three columns of links positioned side by ...

htmlcss

The $.Get method does not retain its value within an each() loop

When using the jQuery each() method on a DropDown select, I iterate through an li element. However, my $.get() function takes time to fetch data from the server, so I use a loading image that toggles visibility. The issue is that the each() method does not ...

javascriptjqueryajax