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

What methods can I use to prevent a JavaScript array from getting filled during page loading?

Looking for assistance to populate an array using JQuery with option values from multiple select elements. I need the array to reset and fill with new options each time a select element is used. Strangely, despite my efforts, the array appears pre-filled w ...

javascriptjqueryarrays

Error Alert: jQuery Ajax Not Executing

Looking to send form data to PHP using jQuery. Check out the code below. -------------HTML FORM-------------- <div id="createQuestionBlock"> <form id="createQuestionForm" action="" method="POST"> Question Code: <input id="code" ...

phpjavascriptjqueryhtmlajax

Utilizing the power of datatable.js to refine and sort through first and last

I'm currently working on an application that uses a dataTable to filter first names and last names. I have separate text-fields for entering first name and last name, but the filtering function is applying to both fields. I need a way to ensure that o ...

javascriptjquerydatatablefiltering

Avoiding the overlap of sub-menu items vertically

My nested unordered list acting as a sub-menu has an issue with overlapping list items. It seems like the padding of the links is causing the overlap: ul { padding: 12px 0; list-style: outside none none; } li { display: inline-block; margin-righ ...

htmlcssdrop-down-menupadding

Is foreach the key to optimizing your queries?

At first, I created three separate queries ($rs1, $rs2, $rs3) for the IFs to check if any images are assigned to the specified product in the database. The challenge now is optimizing this process by consolidating it into a single query and using a foreac ...

phphtmlmysql

Transforming data from a particular csv file and embedding it into an html document

I am currently working on a feature that allows users to select a specific CSV file and display it as an HTML table on the webpage with the click of a button. The process involves: Selecting the desired file from a dropdown menu to determine the CSV fi ...

javascriptjqueryhtmlajaxcsv

Getting the specific information you need from a JSON object in Angular 2

Struggling to extract specific data from a JSON file with nested objects like this: { "results" : [ { "address_components" : [ { "long_name" : "277", "short_name" : "277", "types" : [ "street_number" ] ...

javascriptangularjsjson

Is appendTo() not a valid function?

I've been trying to make this code work but I'm running into some issues. Can anyone help me understand what's going wrong? $("#addLinkLayout input.comment, #addLinkLayout input.link").each(function() { $(this).val().appendTo('d ...

jquery

Responsive Material-UI horizontal navigation bar

Hey there! I'm working on developing a UI using Material-UI, and I want to make it so that the menu can be collapsed into a slide-in style menu when accessed on a mobile device. Currently, I'm using tabs which allow for sliding left and right, b ...

cssmenumaterial-ui

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

htmlcss

update and rejuvenate session information using Node.js and express-session

Currently, I am working with Node.js in conjunction with express-session. Within my codebase, there is session data containing user information. req.session.user Upon updating the user's information, I update the session with the new data and then r ...

javascriptnode.jssession

Setting a dynamic ID attribute for a checkbox within a jQuery DataTable

I am working with a DataTables table that is populated with JSON data provided by a Java servlet. Each row in the table contains a checkbox. I have code that can add a check to every checkbox, but I need to find a way to evaluate the value of a specific fi ...

javascriptjquerydatatables

Exploring ways to maximize the width of responsive images on a webpage

I am currently working on a website located at . The slider image dimensions are set to 800x400, but the height appears too large. I need assistance in making the slider images responsive while maintaining their full width without sacrificing height. Ple ...

htmlcssresponsive-design

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

Tips for utilizing the AngularJS filter to group by two columns in Angular

In my array of objects, each item has three properties: 1. name 2. team 3. age http://jsfiddle.net/HpTDj/46/ I have successfully grouped the items by team, but I am unsure how to group them by both team and age in my current code. I want to display the ...

javascriptangularjsangular-filters

Looking for a way to make a button glide down to the bottom of a card in a

I need to ensure that the contact button in each card floats to the bottom, regardless of the amount of text within the card. This will create a uniform appearance with all cards having the contact button in the same position. Here is an example of how on ...

cssformattingpug

Identifying and locating white-colored text within an HTML document

My HTML file has the following structure: <HTML> <HEAD> <style> .secret { background-color: black; color: black; } </style> </HEAD> <BODY ...

pythonhtml

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

cssthree.jsopacityscene

Incorporating the Acts_as_votable gem alongside Angularjs for interactive voting functionality

I'm trying to figure out how to implement Acts_as_Votable in an Angular template for a car voting system. Despite my efforts, I can't seem to display the vote count when rendering the list in Angular. I think I may need to establish some kind of ...

javascriptruby-on-railsangularjsjsonacts-as-votable