Using jQuery to Detect Whether a Previous Element is a Sibling, the Child of a Parent, and Other Complicated Stuff that WordPress Threw at Me for a Recent Project

Say you’ve got a WordPress shortcode and you want it to display some buttons that do whatever, link off to some website or a map or something. And you want those buttons to appear over the image just before them.

The problem is, there are a lot of ways that WordPress will create code depending on whether you do a single line break after your image, or hit enter twice (creating a new <p> tag), or put the shortcode on the same line as the image.

Here are the three pieces of HTML might export in each case:

The image and the shortcode on one line:

<p><img class="alignleft size-full wp-image-13325" src="https://website.com/wp-content/uploads/2014/06/image.jpg" alt="image" width="600" height="399"> <span class="our-shortcode-html"><a href="/some-url/" target="_blank">The link</a></span></p>

A single return (in Text mode) or Shift+Return (in Visual mode), whereby WP creates a <br> between the image and the shortcode HTML:

<p><img class="alignleft size-full wp-image-13325" src="https://website.com/wp-content/uploads/2014/06/image.jpg" alt="image" width="600" height="399"> <span class="our-shortcode-html"><br>
<a href="/some-url/" target="_blank">The link</a></span></p>

Finally, this is the code created if you hit enter twice (in Text mode) or once (in Visual mode), where the image gets wrapped in a paragraph tag and the shortcode doesn’t (I guess because it’s exporting a <span> which turns off paragraph wrapping via wpautop();:

<p><img class="alignleft size-full wp-image-13325" src="https://website.com/wp-content/uploads/2014/06/image.jpg" alt="image" width="600" height="399"></p>
<span class="our-shortcode-html"><a href="/some-url/" target="_blank">The link</a></span>

So there are a lot of scenarios (captions are another one, they’re covered below as well) possible, and you don’t want to require your clients to always enter them perfectly or the same way every time.

Here’s the jQuery to detect the previous image on the page, regardless of whether it’s a sibling or the child of a parent:

$('.content img').each(function(index) { // assumes your post content is in a container with class="content", checks for each img
var theparagraph = $(this).parents('p'); // this line and the next check if the parent of the image is a paragraph or figure
var thefigure = $(this).parents('figure'); // change 'figure' to 'div.wp-caption' if your caption shortcode uses the old DIVs setup
if (theparagraph.length != 0) { // if the parent is a P
if (theparagraph.find('span.our-shortcode-html').length != 0) { // if the P contains the Shortcode HTML
var shortcodehtml = theparagraph.find('span.our-shortcode-html'); // set shortcodehtml variable to the Shortcode HTML
$(this).hover( // this is just an example, it and the next 6 lines would be replaced with your code
function() {
shortcodehtml.css('opacity','1');
}, function() {
shortcodehtml.css('opacity','0.5');
}
);
} else if (theparagraph.find('span.our-shortcode-html').length == 0) { // if the P doesn't have the Shortcode HTML
var shortcodehtml = theparagraph.next('span.our-shortcode-html'); // set shortcodehtml variable to the Shortcode HTML
$(this).hover(
function() {
shortcodehtml.css('opacity','1');
}, function() {
shortcodehtml.css('opacity','0.5');
}
);
}
} else if (thefigure.length != 0) { // if the previous matched element is a FIGURE (shortcodes like this don't work inside the actual figure, probably a way around that but I didn't get that far)
var shortcodehtml = thefigure.next('span.our-shortcode-html'); // set shortcodehtml variable to the Shortcode HTML
$(this).hover( // this is just an example, it and the next 6 lines would be replaced with your code
function() {
shortcodehtml.css('opacity','1');
}, function() {
shortcodehtml.css('opacity','0.5');
}
);
}
});

Up Next: How to Integrate Liquid Slider with WordPress + Advanced Custom Fields