Convert a div into a clickable link using JavaScript without using too many classes or any ids

After using shortcodes generated by functions.php in a WordPress parent theme, I have come across the following HTML code:

<div class="pricing-table-one left full-width ">
    <div class="pricing-table-one-border left">
        <div class="pricing-table-one-top pricing-table-green left" style="background:#95705b">
            <span style="color:">Restaurant / Café</span>
            <p style="color:"></p>
        </div>
        <div class="pricing-table-one-center pricing-table-white left"> 
            <h5>ONTBIJT</h5>
        </div> 
        <div class="pricing-table-one-center pricing-table-white left">
             <h5>LUNCH</h5>
        </div> 
        <div class="pricing-table-one-center pricing-table-white left">          
            <h5>BRUNCH</h5>
        </div>
        <div class="pricing-table-one-center pricing-table-white left">
            <h5>DINER</h5>
        </div> 
        <div class="pricing-table-one-center pricing-table-white left">  
            <h5>WEST-FRIESE KOFFIETAFEL</h5>
        </div> 
        <div class="pricing-table-one-center pricing-table-white left">
            <h5>SALADESCHOTELS</h5>
        </div>
        <div class="pricing-table-one-center pricing-table-white left">
            <h5>EN NOG VEEL MEER</h5>
        </div>
        <div class="color-buttons color-button-blue pricing-button">
            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c05020a032c0803010d0502420200">[email protected]<a>">Voor meer informatie – Email ons</a>
        </div>
    </div>
</div>

I am looking to create a link for one of the titles inside either a cell or its containing div that will lead to a PDF. While researching, I found out about using jQuery to achieve this but it requires modifying the HTML structure. I am looking for a solution solely based on jQuery or JavaScript. I also came across a helpful snippet from CSS Tricks.

$(".myBox").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

The challenge lies in targeting specific divs within the existing HTML code and making them clickable links. For example:

<div class="pricing-table-one-center pricing-table-white left"><h5>BRUNCH</h5></div>

Is there a way to turn the "BRUNCH" title into a clickable link using JavaScript or jQuery without altering the original PHP server-side code?

javascriptjqueryhtmlcss

Answer №1

After giving a thumbs up to his response, here's a brief excerpt of what I'm referring to. In this scenario, it is assumed that you lack control over the html structure.

$(function () {
  // PDF URLs and their corresponding header names
  var pdfUrls = {
    'BRUNCH': 'http://domain.nl/wp-content/uploads/2015/02/09/x.pdf',
    'DINER': 'http://domain.nl/wp-content/uploads/2015/02/09/y.pdf'
  };

  // Iterate through each h5 tag within pricing-table-one
  $('.pricing-table-one h5').each(function (i, el) {
    var header = $(el).text();

    // Check if a header URL exists
    if (pdfUrls[header]) {
        $(el).wrap('<a href="' + pdfUrls[header] + '"></a>');
    }
  });
});

Here's a fiddle for further reference: http://jsfiddle.net/pbzvszxo/

Answer №2

I don't quite understand your question.

However, it seems like you would like to enclose the div with an <a> tag - this will turn your div into a link -

  • You can achieve this with the following code snippet:

$(function(){
            $( ".pricing-table-one-center" ).wrap( "<a href='#'></a>" );
    });

  • .wrap() - The wrap() method wraps specified HTML element(s) around each selected element.

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

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

javascriptangularjs

Dealing with a divided image in a separate thread: What you need to know

I am facing a challenge with incorporating a LARGE image into a website, which is affecting performance. My solution is to divide the image into smaller pieces and stitch them together using a grid upon loading. The only issue is that it must be in the ba ...

htmlimagecsscss-grid

Choosing the open status of an HTML list

Is there a way to determine which containers in a list are currently open and which ones are still closed? Currently, I am utilizing the slideDown(), slideDown(), and addClass functions on divs with the specific class="section_hdl_aktiv". However, I want ...

javascriptjqueryslidetoggle

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

I have developed a unique library that functions independently from the Promise API, yet achieves similar objectives. It utilizes window.requestAnimationFrame and fallbacks to setTimeout, having no similarities with Promises. Interestingly, it is compatibl ...

javascriptasynchronouspromisees6-promise

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

Capture and set the new value of the Datetime picker in MUI upon user's acceptance click

import React from 'react' import { Stack, Typography } from '@mui/material' import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker' import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers&ap ...

javascriptreactjsmaterial-uidatetimepickermui-x-date-picker

How can you display a doughnut chart with a custom color to represent empty or no data, including doughnut rings?

I have integrated a doughnut chart from chartjs into my Vue project using vue-chartjs. Currently, the doughnut chart does not display anything when there is no data or all values are empty. Is there a way to customize the color and show the entire doughnu ...

javascriptvue.jschart.jsvue-chartjs

What is the maximum size allowed for a background image in CSS?

Within a 70 by 50 px box, I have various SVG images with different aspect ratios - some portrait and others landscape. Setting background-size: 70px auto; works for landscape images but distorts the portraits by stretching them vertically. Is there a way t ...

htmlcssimage

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

I am facing an issue with a third-party library that needs to be included in my TypeScript project. The library is added to the application through a CDN path in the HTML file, and it exports a window variable that is used in the code. Unfortunately, this ...

javascripttypescriptwebpack

"Retrieve and transfer image data from a web browser to Python's memory with the help

Is there a way to transfer images from a browser directly into Python memory without having to re-download them using urllib? The images are already loaded in the browser and have links associated with them. I want to avoid downloading them again and ins ...

javascriptpythonseleniumbrowser

Showcase an Array on an HTML page using EJS

When a user posts an object on my website forum using Ejs/NodeJs/MongoDb, it creates a new object with properties like title, comment, and reply array. I have successfully displayed the titles and comments in different HTML elements, but I am facing an i ...

javascriptnode.jsmongodbejsdisplay

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

The CSS selector within the website's URL

When a URL like www.example.com/#signup is entered, the browser focuses its view on the HTML element with the ID signup. Is this correct? Can the CSS style of the element be changed if it is focused in this way? For example, if there is a div element wit ...

htmlcssurlcss-selectors

Enhance React component props for a styled component element using TypeScript

Looking to enhance the properties of a React component in TypeScript to include standard HTML button attributes along with specific React features such as ref. My research suggests that React.HTMLProps is the ideal type for this purpose (since React.HTMLA ...

javascriptreactjstypescriptstyled-components

Resetting a JQuery button to its initial state

I have a button that, when clicked, rotates to 25deg thanks to Jquery. Now, I want it so that if I click the button again, it returns to its original position. Here is what I have tried: $(document).ready(function() { $(function() { ...

javascriptjquery

Generating a File that Imports Components and Instantly Exports Them Once More

Having trouble with this code. Initially, I had: // file 1 import Box from '@/components/Box' import Popup from '@/components/Popup' const MDXComponents = { Box, Popup } // using MDXComponents somewhere in file 1 Now, to manage t ...

javascriptnode.jsreactjsnext.jsmdxjs

Having trouble executing react-native project using the command "npx react-native run-android"

Hey there! I've been working on a react-native project for quite some time now and everything was going smoothly until yesterday. I encountered an error when running the command npx react-native run-android in Metro before the project had fully execut ...

javascriptreactjsreact-nativemetro-bundlernative-android

Modifying static content within jQuery tabs

Encountering an issue with jQuery $('#tabs').tabs();. When checking out the example on JSFIDDLE, I noticed that the content containing an external php file is always displayed, even when switching to other tabs. <li class="files"> < ...

phpjavascriptjqueryajax

Is there a way for me to align my div with my header on the same line?

HTML: <h2> RAN shares false news story about Hershey's Oil Commitment</h2> <div class="date"> <div class="number">27</div> <div class="month">Oct</div> </div> <p>The Rainforest Action Netwo ...

csshtml