When manipulating an HTML document (especially one that you didn't generate), it can be easier to find a node by matching its descendant's unique id or class attribute and value first, then selecting that descendant's ancestor (which is the node you wanted to in the first place), compared to finding that node by referring to its position in the DOM, which is not obvious and isn't easy to maintain.
For example, in the Australian Government Bureau of Meterology site, you might want to highlight temperature and forecast for Melbourne, so the simplest thing to do is change the style of the row containing that string, but there's no unique attribute you can use to select that row (or tr node):
<tr> … </tr> <tr> <td> <div> <table> <tbody> <tr> <td><a href='…'>Sydney</a></td> <td>20</td> <td>Shower or two</td> </tr> <tr> <td><a href='…'>Melbourne</a></td> <td>16</td> <td>Shower or two</td> </tr> … </tbody> </table> <table> … </table> </div> </td> </tr>
For this site, the trick
is to select the td node containing Melbourne
, then find the first tr ancestor. Here's a sample script using jQuery:
// ==UserScript== // @name www.bom.gov.au Highlight City // @namespace kamhungsoh.com // @description Highlight row of a specific city. // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js // @include http://www.bom.gov.au // ==/UserScript== $("a:contains(Melbourne)").each(function() { $(this).parents('tr:eq(0)').css('background-color', 'grey'); });
In this script, for each a node with a value of Melbourne
, find the first tr parent using :eq(0) and change its background colour. You have to constrain the selection of parents to the first parent, otherwise all the tr ancestors will be selected; on this site, nested tables are used for layout so without this constraint, the enclosing tr node of the table will also be found and modified.
No comments:
Post a Comment