Using jQuery to dynamically disable links based on their HTML content

I am looking for a way to disable links based on the content within their HTML tags. In my website, there are several classified sections that may not always have content filled out. My goal is to visibly indicate to viewers when a classified section is empty by graying out the corresponding link. Here is an example of the HTML structure I am working with:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div>

In each classified section's HTML file, there is a standard text footer that our program generates if the section is empty. This text appears as follows:

<p>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</p>

My aim is to detect this specific text and use it as a trigger to disable the associated link when it is the only content present in the classified section.

Thank you for your help!

EDIT: Below is an example of a classified page with actual content included.

<!-- Classification Title Here -->
004 Announcements

<!-- Begin output Ad Text  <startTags> </startTags> -->

 <p><FONT SIZE=3>text about classified here</FONT></p><BR><HR>

 <p><FONT SIZE=3>Text about classified here </FONT></p><BR><HR>

 <p><FONT SIZE=3><DIV ALIGN=CENTER>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</DIV></FONT></p><BR><HR>

<!-- End output Ad Text <endTags><BR><HR></endTags>-->
javascriptjqueryhtmlcss

Answer №1

If you're struggling to figure out which containers to disable instead of just turning off the link, consider attempting this approach:

$('.col-xs-12.col-sm-6.col-md-4.col-lg-4').each(function() {
    var p = $(this).children('p');
    if (p.length === 1 && p.text().match(/^www\.domainname\.com/i) !== null) {
        // deactivate link within $(this)
    }
});

This code snippet selects all child paragraph elements and verifies that there is only one present, then checks if it starts with the specified "footer" content.

Answer №2

This is a sample HTML code:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->

Here is a snippet of JavaScript:

$('div p:contains("Rent")').find('a').on('click', function(evt) {
    evt.preventDefault();
    return false;
});

This script will prevent all links with the word "Rent" in the text from being clicked.

Visit this link for an example on jsFiddle

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

In the event that the API server is offline, what is the most effective way to notify users that the server is not accessible on the client-side?

I am working on a project where my website interacts with an API hosted on a different server. The website makes API calls and displays the data in a table. However, I want to implement a way to alert the user client-side using JavaScript if the API server ...

javascriptajaxerror-handlingserver

Is it necessary to convert an HTMLCollection or a Nodelist into an Array in order to create an array of nodes?

Here we go again with the beginner guy. I'm working on this exercise from a book called "Eloquent JavaScript". The goal is to create a function similar to "getElementByTagName". However, the first function below is not returning anything and the secon ...

javascripthtmlcss

Error: The function sendFile does not exist in the method res.status(...)

As a newcomer to this field, I must apologize if my issue has an obvious solution. However, I am encountering the following error: TypeError: res.status(...).sendFile is not a function at app.get (/root/discordtest/server.js:10:19) at callbacks (/ ...

javascriptexpress

Express encountered an unexpected error when attempting to navigate to the client directory

I am attempting to send the index.html file from my client directory, located at the same level as my server directory. However, I am encountering the following error: TypeError: undefined is not a function at Object.handle (/myapp/server/routes/routes.js ...

javascriptnode.jsexpress

Having trouble constructing the Grand-Stack-Starter api because babel-node is not being recognized

As I endeavor to create the initial api for the Grand Stack Starter, I encounter difficulties every time I try to execute npm start: >nodemon --exec babel-node src/index.js [nodemon] 1.18.7 [nodemon] to restart at any time, enter `rs` [nodemon] watchi ...

javascriptnode.jsnpmbabeljsgrandstack

Where is the first next() call's argument located?

I'm facing an issue with a simple generator function function *generate(arg) { console.log(arg) for(let i = 0; i < 3;i++) { console.log(yield i); } } After initializing the generator, I attempted to print values in the console: var gen ...

javascriptnode.jsgeneratorecmascript-6

Utilize jQuery to toggle the visibility of one specific div among others with the same class

I'm currently working on a comment and like system similar to Facebook. However, I am struggling to select the specific div element! Here is a snippet of my current HTML: <div class='activoptions'><a href='#'>Like< ...

jqueryhtmlcss

Issue with AngularJS: Unable to add a new property to an object

Here is the Javascript code I am working with in an AngularJS controller: $scope.schedule = {} $scope.selectEquipment = function(equip) { //alert(equip); $scope.schedule.equipment = equip; } I am successfully receiving the equip variable, but fo ...

javascriptangularjs

The Ajax.BeginForm() function is not functioning as expected and is instead directly calling a JavaScript method within the OnSuccess

While working with ASP MVC 5, I have encountered an issue with Ajax.BeginForm() in one of my views. Whenever I submit a form using Ajax.BeginForm, the defined method is not being called. There are no errors thrown or caught, and it directly jumps to the ca ...

javascriptjqueryajaxasp.net-mvc

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss

Issues with AngularJS Nested ng-repeat Functionality in v1.2.1

I'm currently developing a system where I need to nest two ng-repeat statements to iterate through a 2D array. I managed to achieve this successfully using version 1.1.1, as shown here: http://jsfiddle.net/skArT/1/ However, when I tried the same cod ...

javascriptangularjsangularjs-ng-repeat

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascripthtmlangularpipe

What is the best way to pass a variable to the chrome.tab.create function?

Is there a way to pass a variable to the `chrome.tabs.create` function? I am currently working on setting up event listeners for my anchors, but I am faced with a challenge as I am creating them within a for loop: for (var i = 0; i < links.length; i++) ...

javascriptgoogle-chromegoogle-chrome-extension

Is the menu item a little crooked?

Working on designing a menu, and I noticed that the 'Book Now' option is slightly misaligned (pushed down) after adding a border. This seems to disrupt the horizontal alignment. Is there a way to correct this issue? Check out my Codepen Here is ...

htmlcss

Problem with Jquery date picker when text field is focused

I am currently working on a website: When I try to schedule a visit by clicking the link (located in the lower left side of the white area in the center of the page), a form is supposed to open in a modal window. However, when I click on the text box ask ...

jquerybootstrap-4

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

Efficient method to update the state of a result in React JS using hooks within an asynchronous function and useState

How can I ensure the state is updated correctly after using setState? I found a code example similar to mine at Why react hook value is not updated in async function?, but it doesn't provide a solution to the problem. Any help would be greatly appreci ...

javascriptreactjs

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?" I am still trying to grasp the ...

javascriptangularjstimertimeout

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms