Question

我想为一个Web应用程序开发一个非常简单的用户脚本，它主要插入一些元素和CSS。我无法更改源代码。 HTML代码有点混乱：它是基于表格的，大多数元素都没有ID，并非所有元素都有有用的类，有很多无用的元素嵌套在其他元素中等等。简而言之，没有明确可识别的元素。

好处是布局总是相同的，因此结构是可预测的，并且在可预见的未来（可能永远不会）源代码将不会发生变化。考虑到这些因素，我能想到的唯一解决方案是通过凌乱的上下文来识别元素（例如，可以通过$("div table table > tr > td");来识别一个感兴趣的元素）。如果我遵循这个想法，事情就会起作用，但它不会完全辐射出质量。

那么，有没有更好的方法来实现这一目标？

Answer 1

我建议观看关于“努力减少风格”的演讲，这也可以用于js。 https://vimeo.com/101718785

以下是关于同一主题http://www.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/

的文章

Answer 2

如果您想要减轻代码质量，通过不使用具有许多子元素的大量选择器，将您想要的选择放入一些变量中来引用。例如：

而不是写

$("div table table > tr > td").on("event", function(){ code });

将选择器保存到变量中，特别是如果它们被多次使用。

var $a_Variable = $("div table table > tr > td");

然后将变量引用为选择器。如果您无法编辑html代码，也可以将类添加到它们中，如果您有权定义CSS样式，则可以将其授予。

$(a_Variable).on("click", function(){ $(this).addClass('.some_class'); });

定义变量是保存多次重写相同内容的好方法。

识别混乱（但可预测）的HTML代码中的元素

2 个答案: