Question

我正在编写一个非常混乱的Android单元转换应用程序，使用各种可怕的东西来使它漂亮。基本上它通过vebviews执行JS，并在花式旋转器中显示根据任意大小列表格式化的html，下面有缩写...等等等等......

反正。现在我有这样的事情：

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>';
}

其中slotData [l]表示“Milimeters”，缩写为“Mm”，位于下方，格式略有不同。这个想法是你可以输入数字，然后它们会出现在大型米勒米下面，旁边是小Mm，这样你就可以看到“4400mm”。

我正在尝试访问和修改我的代码中不同点的“sw-right”类的子li。想知道是否有人知道一个简单的方法来做到这一点？我可以毫无困难地访问父母，但我不确定从那里开始的正确方法是什么......

我的访问权限是这样的：

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

Anythoughts？

谢谢你们......

纳撒尼尔。

Answer 1

我建议使用jquery：

$('li.sw-right').html('html_you_want_set');

Answer 2

您不应该尝试嵌套<li>元素。 HTML语法不允许嵌套列表项。由于</li>结束标记是可选的，因此浏览器可能只是将您的嵌套项目视为第一个标记的兄弟，并将第二个关闭标记丢弃为第二个项目的双重标记。

Addional：由于您正在尝试撰写两部分的列表项，因此您真正想要的是definition list。要设置嵌套在标记内的范围的属性，请考虑使用span。

Answer 3

你可以使用

var myNestedLI = document.getElementsByClassName( 'sw-right' )[ 0 ]

或

var topElements = document.getElementsByTagName( 'li' );

var nestedElements = []

for( var i = 0; i < topElements.length; i ++ )
{

var theseElements = topElements[ i ].getElementsByTagName( 'li' )

for( var j = 0 ; j < theseElements.length; j ++ ) nestedElements.push( theseElements[ j ] )

}

// nestedElements now contains all nested LI elements

Answer 4

正如Sparky指出的那样，你不能像那样嵌套<li>标签。第二个li将被视为第一个单独的列表项，使他们成为兄弟姐妹。相反，您想要的是<div>内的两个单独的<li>。 Div是一个通用的块级元素。 （块级意味着它们之间存在换行符，而泛型意味着div的含义和样式完全取决于您。）

我建议使用更具描述性的标记：

<li class="calculated-value">
  <div class="unit">*large unit name*</div>
  <div class="value">*small value with abbreviation*</div>
</li>

在CSS中，以下规则会使值div显示更小：

li.calculated-value div.value { font-size: 75%; }

（你可以添加额外的规则来给它一个缩进，更好的间距，粗体或颜色设置等等。你可以为div.unit添加另一行来分别设置那一行。）

查找嵌套<li>并修改它</li>

4 个答案: