Jquery selecting innerText of custom tags

Question

I'm hoping this is fairl simple but having done a lot of googling and experimenting with selectors, find(), content(), text(), etc I'm not quite getting this right. Any help would be appreciated.

I have some custom markup in the web page.

<div id="myGrid">
    <url>www.google.com</url>
    <columns>
        <column>ID</column>
        <column>Position</column>
        <column>FirstName</column>
        <column>LastName</column>
    </columns>
</div>

I need to select the text of <url> into a variable. I also need to get a collection of <columns>'s into a variable (array/collection).

The tag name will be the identifier, i.e. I can't use an ID or CLASS to find these elements.

Seems like it should be do-able but my attempts so far are hit and miss... any help is much appreciated.

Thanks!

Answer 1

var $t = {}
var i = 0;   

$('#myGrid').find('column').each(function(){

    $t[i] = $(this).text();
    i++;

});

alert($('#myGrid url').text());
alert($t.toSource());

Answer 2

I will give you help with the url because it is very basic. This should help you out with the columns.

Jquery will select any element you give. You are able to use any element name. Check out the jsfiddle here.

IF you are worried about IE issues, use document.createElement('url') which will tell IE that url is an element of the document

document.createElement('url');  //crutch for IE

$(document).ready(function() {
    alert($('url').html());  
})​

Answer 3

How about this (jsbin version http://jsbin.com/ucivav)?

var url = $("#myGrid url").text();
var $cols = $("#myGrid columns column");
alert(url);
alert($cols.first().text());

Answer 4

var url = $("url").html();
var columns = $.makeArray($("column").find("columns").html());

Although I haven't tested the above, a better way would be to use the jQuery 'each' function:

var a = Array();
$('#myGrid').find('column').each(function(){
    a.push($(this).html());
});

And to test: alert(a[2]); where the number is the array number.

Where url is your url (duh) and columns is your column array. This would work great if there's only one or if you're using this within a function, in which case I would change the selectors to $("url", this).html();