2

I currently have a website source code (no control over the source) which contains certain content that needs to be manipulated. This would be simple on the surface, however there is no unique ID attribute on the tag in question that can uniquely identify it, and therefore allow for further traversal.

Here is a snippet of the source code, surrounding the tag in question.

   ...
    <td width="100%"> 

     <!--This table snaps the content columns(one or two)--> 

     <table border="0" width="100%"> 
   ...

Essentially, the HTML comment stuck out as an easy way to gain access to that element. Using the JQuery comment add-on from this question, and some help from snowlord comment below, I have been able to identify the comment and retrieve the following output using the 'dump' extension.

$('td').comments().filter(":contains('This table snaps the content columns(one or two)')").dump();

returns;

jQuery Object {   
    0 = DOMElement [ 
        nodeName: DIV
        nodeValue: null
        innerHTML: [ 
            0 = String: This table snaps the content columns(one or two)
        ]
    ] 
}

However I am not sure how to traverse to the sibling element in the DOM.

This should be simple, but I haven't had much selector experience with JQuery. Any suggestions are appreciated.

Community
  • 1
  • 1
Jake Edwards
  • 1,190
  • 11
  • 24
  • Didn't the siblings method work? What exactly do you want to do? If you want to call a function on each table, you would call sinlings('table') on your result above and then call each(yourfunction) on that: `...siblings('table').each(yourfunction)` – Peter Jaric May 26 '10 at 09:41
  • Ah, I see, maybe the comments plugin does some evil magic behind the scenes, making it impossible to go on with ordinary jQuery code. – Peter Jaric May 26 '10 at 09:43
  • See my latest comments under my answer... – Peter Jaric May 26 '10 at 10:26

2 Answers2

1

I am thinking you could use the siblings method:

$('td').comments().siblings('table').yourcode...

From the docs:

Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Peter Jaric
  • 5,162
  • 3
  • 30
  • 42
  • Maybe not exactly the code above, since that would get all tables that are siblings to any comments. – Peter Jaric May 26 '10 at 08:15
  • Hmm, unfortunately there are multiple instances of a comment with a sibling as a table. Is there any way I can filter the comments() by the text they contain? e.g. when I dump the comments() array, there are several attributes with .innerHTML -- which contain the text I could filter by. Thoughts? – Jake Edwards May 26 '10 at 09:03
  • 1
    Yes, try the `:contains` selector: http://api.jquery.com/contains-selector/ which you would use like this: `$("td").comments().filter(":contains('your text')").siblings('table').yourcode...` – Peter Jaric May 26 '10 at 09:19
  • Or something like that, I didn't test it. – Peter Jaric May 26 '10 at 09:19
  • 1 Step closer, the only problem now is accessing the sibling. JQuery doesn't seem to know the