Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this:

   <ul>
        <li id="projectrow_364"> 
            <span>Forest</span>
        </li>
        <li id="projectrow_365"> 
            <span>Life</span>
        </li>
        <li id="projectrow_367"> 
            <span>House</span>
        </li>
        <li id="projectrow_388"> Country
            <ul>
               <li id="projectrow_390"> 
               <span>US</span>
             </li>
            </ul> 
        </li>

On the same page, I also have:

<h3  id="project-title-id"> US</h3>

How can I use jQuery to add the class name "activeProject" to the <ul> li element above where the text of #project-title-id matches with the text value of <ul> <li>?

jquerycss

Answer №1

Check out this solution - http://example.com/jsfiddle123

var headerContent = $.trim( $('#title-of-project').html() );
var listElement = $('li span:contains(' + headerContent + ')');
listElement.addClass('highlightedProject');

Answer №2

In jQuery, you can utilize the :contains selector to find elements based on their content, taking into account the case sensitivity:

var text = $('#title-of-project').text();
var element = $('ul li ul li:contains("'+text+'")');
element.addClass('highlight');

Check out this JSFiddle for a working example.

Learn more about using the :contains selector in jQuery.

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

Experiencing a result of NaN following a mathematical operation on variables

While working with an array obtained from a JSON response, I am encountering NaN after performing addition operations. var a = new Array(); var b = 0; var c = 0; alert(b); for (var x = 0; x < length; x++) { a[x] = response.data[x] } for (var i = 0; ...

javascriptjqueryjson

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

javascripthtmlcss

Selenium is unable to locate an element using Jquery

sel.add_script( sel.get_location(), "jquery.js") #I am getting u'fd6c42bcc770ca9decc4f358df3688290a4257ad' idOfResultWithSomeImage=sel.get_eval("window.jQuery('#result').find('img').filter('[alt=SeleImage]') ...

c#jquerypythonseleniumselenium-rc

Display HTML content in autocomplete using jQuery UI

I implemented a search feature on my website using jQueryUI, similar to how it works on Facebook. Below is the jQuery code: //search main function split( val ) { return val.split( ); } function extractLast( term ) { return split( term ).pop(); } ...

javascriptjqueryjquery-ui

The click event does not point to the servlet (IDEA, java)

I am facing an issue where the command $.get('MyController1', function (responseText) is not sending to my servlet. I am using ajax and after clicking the button it should send to my servlet ('MyController1' or 'MyController2' ...

javascriptjavajqueryhtmlservlets

Accessing a React component by ref before it has been rendered for the first time

In my component, I have a set of links with an animated line underneath the active link using position: absolute. Before I can position the underline correctly, I need to determine the offset().left value of the active link. The challenge is that before ...

jqueryreactjs

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

javascriptcsstwitter-bootstrapsnap.js

I'm having trouble with jQuery recognizing the left-margin property. Is there a workaround for this issue?

I rarely use jquery, but I wanted to add animation to a side bar. The sidebar menu is 670px with a -670 left-margin. When the user hovers over it, I'd like the left-margin to change to 0px and reveal the hidden content. Upon mouseout, it should return ...

jquerycssmargin

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

htmlcss

The issue of losing session data in Laravel 4 due to multiple AJAX requests

There is an issue on my page where photos are lazy loaded via AJAX, and sometimes all session data gets lost while the photos are loading. This problem does not occur consistently every time the page is loaded. I have already checked for session timeout or ...

phpjqueryajaxsessionlaravel-4

When an accordion is clicked, the content is dynamically loaded within the accordion on the page using PHP, jQuery, and AJAX

To optimize the loading speed of my information-filled page connected to two databases using php, javascript, jquery, I'm looking for a way to make the upload process faster. Currently, some data is displayed immediately while other details are hidden ...

javascriptphpjqueryhtmlajax

Utilize the groupBy() function in Laravel to access the index keys returned from JSON data

What is the best way to retrieve the first object in a JSON response? Inside the controller: Model::with('some_relation')->get()->groupBy('id'); return response()->json(['transactions' => $transactions]); When a ...

jqueryarraysjsonlaravellaravel-5.6

Using PHP to query an array and sending the results to the client-side using

I am relatively new to utilizing jQuery and AJAX, so I've encountered a minor issue. I'm aiming to incorporate PHP query results into my jQuery code but I seem to be struggling with the implementation. Here is the snippet of code I am using to in ...

phpjqueryarraysajax

Can you find a method to retrieve the current page on a dashTable?

I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...

pythonhtmlcssplotly-dash

Understanding the request URL in Ajax when receiving a response

How can the URL of a jQuery request be retrieved from the response received? Perhaps something like this: function retrieveUrlFromResponse(response, url){ requestUrl = url; } ...

javascriptjquery

Increase numbers with uniform speed using jQuery for each number

I am working on implementing a jQuery script that will visually increase any number from zero to its value using setInterval(). Here is the current solution I have come up with: $('.grow').each(function() { var $el = $(this); va ...

javascriptjquerysetinterval

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

What is the best way to create underlined text that is either left-aligned or centered?

I am looking to replicate this specific style of decoration in a full width container. My goal is to have it aligned to the left of the text and restricted to a maximum width. https://i.stack.imgur.com/H8DXT.png ...

htmlcss

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

javascriptjqueryhtmljquery-ui