0

I am playing with Regular Expressions in Javascript (see here) and I have stumbled upon some difficulties trying to match <li> elements. My Css looks like this:

<div id="ResultTabContent" class="TabContent DetailsTabContent">
    <div class="DetailsTabContent">
    <ul>
    <li> <strong>Title:</strong>
    Text Title
    </li>
    </ul>

I have written some Javascript that detects the Unicode range in which Text title is written and, depending on the range, uses the PUA (private use area) from a custom font. This works fine with classes, as follows:

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

However I cannot let it work for UL inherited elements. What it makes that difficult is the fact that there are no classes associated to the <li> elements.

Any idea?

Cheers, I.

Community
  • 1
  • 1
panza
  • 1,341
  • 7
  • 38
  • 68
  • So what exactly are you asking? Are you asking how to select LI elements that have no class attribute? – I Hate Lazy Sep 28 '12 at 14:13
  • 2
    Careful, you just re-asked one of the most famous questions on stack overflow, see the first answer: http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – Benj Sep 28 '12 at 14:14
  • 1
    @Benj, Jonah: If you read the question, it doesn't seem that OP is trying to parse HTML with a regex. – I Hate Lazy Sep 28 '12 at 14:17
  • @user1689607, thanks for your reply. I need to select LI elements that have no class attribute, detect whether their text has any character between a certain Unicode range, then replace the class with a customised one that uses a specific font (residing on the server) – panza Oct 05 '12 at 14:50
  • @ilariac: My answer below does that, given the HTML you posted in your question. – I Hate Lazy Oct 05 '12 at 14:52

1 Answers1

0

So it seems that you're using regular expressions to verify some text content, but your question is about targeting <li> elements that have no class.

You can use CSS style selectors to do DOM selection. I'm not sure what you are capable of selecting, so I'll base the selector off the outer <div> that has the ID.

$(document).ready(function() {
    var li_els = $('#ResultTabContent > div.DetailsTabContent > ul > li');

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

This uses the > child selector to drill down from the outer DIV to the nested LI elements.

Then .each() is used just like in your original code to iterate the LIs.

I Hate Lazy
  • 47,415
  • 13
  • 86
  • 77