Nested Span Elements Effecting Formatting and JS Output

I've been working on a site that highlights a Tibetan phrase and it's English counter part when the user hovers over it. This bit of jquery works to do that function jsfiddle example of working code.

<p><span title="extensive">ཆེན་པོ་</span><span title="Entering the Middle Way">དབུ་མ་ལ་འཇུག་པའི་        </span><span title="explanation">རྣམ་བཤད་</span><span title="The Illumination of the         True Thought">དགོངས་པ་རབ་གསལ་</span> <span title="Here begins">བཞུགས་སོ</span>་།།</p>

<p><span title="བཞུགས་">Here begins</span> <span title="དགོངས་པ་རབ་གསལ་">The Illumination of the True Thought</span>, an <span title="ཆེན་པོ་">extensive</span> <span title="རྣམ་བཤད་">explanation</span> of <span title="དབུ་མ་ལ་འཇུག་པའི་">Entering the Middle Way</span>.</p>

However, when I need to format the text, to bold or change font size for example, jsfiddle example of nonworking code the nested spans seem to create a conflict and the highlight function ceases to work properly.

<p><span style="font-size: 24px;"><span title="extensive">ཆེན་པོ་</span> <span title="Entering the Middle Way">དབུ་མ་ལ་འཇུག་པའི་</span> <span title="explanation">རྣམ་བཤད་</span> <span title="The Illumination of the True Thought">དགོངས་པ་རབ་གསལ་</span> <span title="Here begins">བཞུགས་སོ</span>་།།</span></p>

<p><span style="font-size: 20px;"><span title="བཞུགས་">Here begins</span> <span title="དགོངས་པ་རབ་གསལ་">The Illumination of the True Thought</span>, an <span title="ཆེན་པོ་">extensive</span> <span title="རྣམ་བཤད་">explanation</span> of <span title="དབུ་མ་ལ་འཇུག་པའི་">Entering the Middle Way</span>.<span></p>

Any ideas on how I can go about fixing this. Ultimately, I'd like to implement as a wordpress quicktag or shortcode or possibly even creating a plugin to handle this but I have no working knowledge of php.

Any help is much appreciated!

Thanks, vajra108

Solutions

You need to restrict the :contains search to only the span elements that contain just the text, not the span elements used for formatting. In your non-working jsFiddle, you can do that by just adding the [title] to them as in this:

$('span[title]:contains("'+$(this).attr('title')+'")').addClass('highlight');
    },
    function() {
        $(this).removeClass('highlight');
        $('span[title]:contains("'+$(this).attr('title')+'")').removeClass('highlight');
    }
);

But, I'd probably suggest you actually use a class name for a less fragile specification. That way you'd only be searching exactly the span elements you want to search and no others.

Modified demo: http://jsfiddle.net/jfriend00/cj2G5/

FYI, your whole issue would get less complicated if you used class names and CSS for formating too rather than inline span tags with CSS styles on them.

Well, the problem is that you are nesting spans. In the code below you are targeting the span which contains the required text and highlight it, but you can see that the style span also contains all the text so it is highlighting the style span.

 $('span:contains("' + $(this).attr('title') + '")').addClass('highlight');

What you can do is, you can remove the style span and style the paragraph instead ( Fiddle).

NOTE: Avoid using inline css.

Tags: PHP / Jquery / Html

Similar questions

WooCommerce - Product Add-ons (Extension) not effecting price in cart
I am running the WooCommerce extension "Product Add-ons". I have created a catering website and ideally, the customer should be able to click the "Platinum Upgrade: Add a fresh fruit cup and a chocolate dipped strawberry to each box" to add $2.00 to the item's price. http://tkainteractive.com/sandbox/product/angus-roast-beef-avocado/ On the product...
How to target one widget on my Wordpress homepage without effecting other sections?
I am having trouble changing the styles of a widget on my Wordpress site. The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"." The styles seem to be mainly applied to the ID ".content", but I'd like to alter those s...
How to centre menu of Wordpress website without effecting mobile menu
I've centred the top menu of my wordpress website www.theestablishmenthairdresing.com to make sure that the top menu does not overlap with the logo on the left when the browser window size is reduced using the following code: However, now when I check the mobile menu for the website the sub-menu drop down option for "About" do not appear on the mob...
backdrop-filter not working on iOS / effecting positioning?
I have two weird issues with the CSS "backdrop-filter". First, I use this snippet to create this frosted glass effect: It works great on all devices but my old iPad (6 Gen / iOS 14.7.1). There it just does not show up at all. It does work on other pages though (here for example). I guess some other file has to interfere then? The website ...
JavaScript loop on span elements, checking their values and replacing other node border-color
I'm in a process of making a new website on Wordpress CMS, and have quite a big problem down here. What I would like to achieve? Well I'm implementing an review system, and with PHP I'm picking the custom taxonomy values in my website, pasting it as an circular chart. Everything is working correctly, but I would like to achieve one more effect. I w...
Add span in top menu item with nested itens
I found examples adding a class to top level itens, so we can display an arrow in menu itens with subitens, but is seems terrible to cope with the already builtin WordPress classes, can't display the arrow with current and css hover, it just ruins all states. Is there someway to add a <span class="arrow"></span> within the parent li ins...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.