Question

I’m writing a very conflated Android Unit Conversion application, using all kinds of terrible things to make it pretty. Essentially its executing JS via vebviews, and displaying html formatted according to arbitrary size lists in fancy spinners, with abbreviations underneath… blah blah…

Anyway. Right now I’ve got somthing like this:

for (l = 0; l < this.slotData.length; l += 1) {
    out += '<li>' + this.slotData[l].values[i] + " "+'<li class="sw-right">'+this.slotData[l].abbreviations[i]+'</li></li>';
}

Where slotData[l] represents say “Milimeters” and abbreviations is “Mm”, which is underneath, and formatted slightly differently. The idea is that you can enter numbers, and they will show up, underneath the Large Milimeters, next to the small Mm, so that you can see “4400mm”.

I’m trying to access and modify the child li, of class “sw-right” at a different point in my code. Wondering if anyone knows an easy way to do this? I can access the parent without trouble, but I’m not sure what the proper way to go from there is…

My access is somthing like this:

this.slotEl[slot].......

Anythoughts?

Thanks guys…

Nathaniel.

Answer 1

You should not try to nest <li> elements. HTML syntax does not permit nesting list items. Since the </li> closing tag is optional, a browser might well just treat your nested item as a sibling of the first one anyway, and discard the second close tag as a double-close on the second item.

Addional: Since you are trying to compose a list item of two parts, maybe what you really want is a definition list. For setting attributes on ranges nested inside of tags, consider using span.