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

Question

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

好处是布局总是相同的，因此结构是可预测的，并且在可预见的未来（可能永远不会）源代码将不会发生变化。 考虑到这些因素，我能想到的唯一解决方案是通过凌乱的上下文来识别元素（例如，一个感兴趣的元素可以通过$("div table table > tr > td");来识别$("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'); });

定义变量是节省多次重写同一事物的好方法。