2

I have the following html generated by shortcodes generated by functions.php in a WordPress parent theme:

<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:info@domain.nl?subject=Informatie Restaurant">Voor meer informatie – Email ons</a>
        </div>
    </div>
</div>

I need to make one of the titles in a cell or the div containing it a link to a pdf. I read here that I can do this on an id with jQuery like so:

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

But his is only working when you change the html. I prefer a Jquery or JavaScript solution only. On CSS Tricks I found another snippet that may help

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

I only would need to change the a element to div and the class to the class of the div. However, I need this done with a few specific divs (some items inside the table, but not all) and it only has one sort of useful class:

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

Perhaps by focussing on parent div with class "pricing-table-one" and then the div inside it. But then I still need the nth div or h5 tag..

Is this possible to achieve creating a link of BRUNCH or other h5 tags with this exising HTML code with JavaScript or jQuery or will I have to change to PHP code server side?

Community
  • 1
  • 1
rhand
  • 1,176
  • 4
  • 17
  • 45

2 Answers2

2

I am not getting your question exactly.

But, I thinks you want to wrap the div with <a>- it will make your div as link -

  • You can do something like below code.

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

  • .wrap() - The wrap() method wraps specified HTML element(s) around each selected element.
prog1011
  • 3,425
  • 3
  • 30
  • 57
  • Yeah I know I am hard to follow sometimes. That is because this is a bit tough for me atm :) . The issue is that that are many table cells (divs) with the same class. And only a few I want to make links to certain pdfs. So how can I grab the div around BRUNCH for example and link it to domain.nl/wp-content/uploads/2015/02/09/x.pdf? – rhand Feb 10 '15 at 07:01
  • @rhand - you mean we can search text like "BRUNCH" - i.e - if we get text "BRUNCH" in last child element then we can make a link for parent DIV - is it ? – prog1011 Feb 10 '15 at 07:35
  • I mean that I need to have a few of the restaurant menu titles link to different pdf files. So yeah, if I could search for word inside h5 and that make it link to a pdf of choice that would work for BRUNCH and a few other menu items. Also checking a way to add a random id inside $output (php generating the html for table cells) now so I can select a specific div or h5 to make my life easier.. – rhand Feb 10 '15 at 07:38
  • 1
    @rhand His example is correct. A simplified version would be to loop through each `h5` tag within the `pricing-table-one` element and just wrap an anchor tag with `href="{{PDF URL}}"` if the text is equal to "BRUNCH" or "DINNER" or whatever you want. – jungy Feb 10 '15 at 07:44
  • @jungy so I could link BRUNCH to x.pdf and LUNCH to y.pdf this way? Will read it all again. Perhaps I need a short break to clear my mind. – rhand Feb 10 '15 at 07:48
2

I upvoted his answer but, here's a quick snippet of what I mean. This is assuming you have no control over the html.

$(function () {
  // pdf urls and 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'
  };

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

    // if a header url is found
    if (pdfUrls[header]) {
        $(el).wrap('<a href="' + pdfUrls[header] + '"></a>');
    }
  });
});

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

jungy
  • 2,932
  • 2
  • 18
  • 17
  • great ! - I was about to post same thing But I was little busy in office ;) -- great work ....+1 - I hope "@rhand" got the solution in your answer. – prog1011 Feb 10 '15 at 08:54
  • I added @jungy 's script with `wp_enqueue_scripts` . Seems like a great solution. Now dealing with an error at http://goo.gl/iKltLE : `pricingurls.js?ver=4.1:1 Uncaught TypeError: undefined is not a function pricingurls.js?ver=4.1:1 (anonymous function)` . Looking into this some more. Thanks for all the input so far! – rhand Feb 10 '15 at 10:26
  • Now loading it from the footer instead of the header, but the error remains. – rhand Feb 10 '15 at 10:53
  • Never mind. Fixed by replacing `$` by `jQuery`. Forgot all about this adjustment for WP custom jQuery code but found explanation again here http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function – rhand Feb 10 '15 at 11:08