What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted

$('a[title="*"]').find('contains("PDF")').css({'background-color':'red'});

Unfortunately, this code is not working as expected.

To clarify, I am searching for a specific word in the title.

Answer №1

Here is a helpful solution for you:

Click here for a Live Demo

$('a[title*="PDF"]').css({'background':'red'});

If you need to search with ignore case, try this:

$('a[title*="pdf"]').filter(function(){
    if(this.title.toLowerCase().indexOf("pdf") != -1)
         return $(this);
}).css({'background':'red'});

Answer №2

Change the CSS background color of all links with the title attribute containing "PDF" to red using jQuery:
$('a[title*="PDF"]').css({'background':'red'});

Answer №3

When searching for a particular title, the code snippet is:

$("a[title*='specificTitle']");

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

Which method is best for extracting content from a WebView - using Regx, implementing JQuery, or utilizing HTML parsing?

Criteria for Acceptance I am working with a website in a WebView that is not under my ownership. I want to be able to trigger native button clicks based on the content of the page. Tasks at Hand I need to determine if the HTML content contains specific UR ...

Effortlessly deleting a row with JQuery and PHP without reloading the page

I am currently working on creating a jQuery function to delete a div, but I'm facing an issue. Whenever I click the submit button, the div is not being removed and the page gets refreshed. How can I achieve this without refreshing the page? You can ...

Guide on invoking an Angular 1.5 component with a button press

Having just started learning Typescript, I'm struggling to figure out how to call my Angular component "summaryReport" on a button click. Here's a snippet of my code: Let's say I have a button that should call my component when clicked with ...

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

Having trouble with the alignment of a textbox and button on Chrome, they're not displaying correctly. Here are examples from different browsers; notice how the textbox in Chrome is misaligned. Internet Explorer/Firefox https://i.stack.imgur.com/mf ...

The delay in loading HTML content using FOSJsRoutingBundle and Ajax for a specific route parameter (ID)

I'm using FOSjSrouting in my symfony2.7 project. This is the code in my html.twig view: <table> <!--table header code ...etc... --> <tbody> {% for currentData in arrayData %} <tr> <td>{{ currentData. ...

Exploring JavaFX and FXML TreeTableView customization for column and header styles

I've been working on a JavaFX project and I'm having trouble customizing the style of the TreeTableView header or columns, like changing the color, width, font size, etc. I've tried using various codes like these but none seem to work. ...

What is the best way to conceal an element in jQuery by utilizing a JavaScript variable?

I have encountered a challenge in concealing this specific page element in the provided html code <table cellspacing=5 cellpadding=3> <tr> <td id="lst2"><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td> & ...

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

What is the reason for the absence of the $.ajax function in the jQuery package designed for node.js?

Here is my code sample, which I would like to use for practicing with jQuery's ajax function. Note that I have already installed the jQuery package using npm install jquery: var $ = require('jquery'); var remoteValue = false; var doSometh ...

A specialized authorization attribute that combines the name of the controller with the name of the action

My custom AuthorizeAttribute is functioning well, as shown in this post about handling session timeout in ajax calls. However, there is a challenge with the LogOn Action of the Account Controller in ASP.NET MVC. Upon logging on, it returns to the last page ...

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

Initiating an Ajax POST request when the onblur() event is triggered

Having an issue with Ajax. I'm trying to submit a changed value from an input field on the onblur() event, but there's a flicker that's bothering me. When I enter a new value and click away, the old value briefly flashes back before changi ...

Emails are not responsive to media queries

I've experimented with multiple media queries in an attempt to make this work on both iPhone (landscape/portrait) and desktop, but I'm struggling to achieve the desired outcome on both simultaneously. While some of my classes are functioning cor ...

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

The mouse scurries away once the div height has been adjusted

How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme? If anyone knows a solution, please check out my jsfiddle as it's not working as I intended. Here is ...

Modify the value of a variable every 250 milliseconds

Currently working on a game website and stuck at the registration stage. We are looking to allow players to input a code in their Ingame notes for verification purposes. I have created a PHP class to retrieve the ingame notes, but now I need to set a java ...

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks. TypeError: promise.catch i ...