0

following my question here, I have been trying to write a similar bit of code in Javascript that would detect a range of Unicode characters occurring in the text from nested CSS classes. So far, I was able to make it work on DIV Classes, for instance: 

$(document).ready(function() {
    $('h2.ClassName').each(function(index, DOMElement){
        if(/[\uE000-\uF8FF]+/.test($(DOMElement).text())) {
            $(this).removeClass('ClassName').addClass('CSS-ClassName');
        }
    }) 
});

However, a similar Javascript does not work on the following classes:

<ul>
    <h4 class="ClassName">Text</h4>
    <li class="ClassName">Text</li>
<ul>

Any idea?

Thanks indeed,

Regards,

I.

Community
  • 1
  • 1
panza
  • 1,341
  • 7
  • 38
  • 68
  • Use only the classname instead of 'h2.classname'. – Miko Sep 25 '12 at 15:59
  • 1
    @ilariac , There is no h2 element in your code . is it h4? – kannanrbk Sep 25 '12 at 16:01
  • @Mayilarun, bharathi, the Javascript code for h2.classname works fine, however I cannot use a similar approach for UL Classes. The HTML example is to show how those particular classes are nested. Hope this would explain this better. I. – panza Sep 25 '12 at 18:38
  • just as a side note, you shouldn't have your h4 placed within a UL element.. I get that it's a random example however. – Pebbl Sep 29 '12 at 17:13
  • @pebbl, I do agree with you. I was not the one who wrote it... – panza Oct 05 '12 at 14:43

1 Answers1

1

If you want jQuery to find other elements using the same ClassName then you need to add them to your selector, like so:

$(document).ready(function() {
    $('h2.ClassName, h4.ClassName, li.ClassName').each(function(index, DOMElement){
        if(/[\uE000-\uF8FF]+/.test($(DOMElement).text())) {
            $(this).removeClass('ClassName').addClass('CSS-ClassName');
        }
    }) 
});

If you want to get really generic, and change all elements with ClassName then you would change the selector to:

/* ... */
$('.ClassName').each(); /* ... you get the idea ... */
/* ... */

Hope that helps.

seangates
  • 1,467
  • 11
  • 28
  • thanks for your reply. Unfortunately, my issue gets slightly more complicated when I have the following HTML elements:
    • Title: Text to detect
      • .... The above solution does not seem to work... Thanks, I.
     – panza Sep 28 '12 at 12:54
  • Have you tried `$(this).text()` instead of `$(DOMElement).text()`? I don't think it's the problem, but worth a shot. – seangates Sep 29 '12 at 16:46
  • 1
    +1 Ilariac's answer seems to work from what I can see: http://jsfiddle.net/bzHxT/1/ - when running in FireFox 16 Mac OSX I get each item ending up with a red border... which is what should be happening - at least in my example - should it not? – Pebbl Sep 29 '12 at 17:10
  • Hi all, thanks for your help. Yes, it works in case
  • elements are associated to a class. Unfortunately, it does not in case those elements have no classes associated. See [this] (http://stackoverflow.com/questions/12641673/javascript-regular-expressions-for-li-elements) for more info. Thanks again for your replies! I.
    • – panza Oct 05 '12 at 14:43
  • 1
    @ilariac In that case then you just need to target the elements you require using their tagname instead. `$('.ClassName li')` for example. Or if you'd prefer you could target all elements within a .ClassName element using `$('.ClassName *')` – Pebbl Oct 05 '12 at 15:15