Select DOM elements using ASP.net AJAX similarly to how Jquery does it

Question

I'm trying to select a particular set of div elements and change their height properties to auto. The jquery code I use to do that at the moment is:

$("div#TreeView1 td > div").css("height","auto");

Unfortunately I have to use the MS javascript lib (despite my protests). How can I do something similar using Microsoft's ASP.net AJAX?

Can't you include both libraries? They address different problem domains. — Crescent Fresh, Dec 02 '09 at 22:02
My boss wants all the web developers to use one javascript framework so that it's more maintainable in the future. Also including two js frameworks would slow the initial web page load (probably barely noticeable). Unfortunately I have my hands tied :( — Darwyn, Dec 02 '09 at 22:11
Try getting your boss to read this: http://stackoverflow.com/questions/498680/pros-and-cons-of-ms-ajax-vs-jquery-in-an-asp-net-mvc-app — Ben Lesh, Dec 02 '09 at 22:17

score 2 · Accepted Answer · answered Dec 02 '09 at 22:50

The direct translation for $("div#TreeView1 td > div").css("height", "auto") using the tools available in the ASP.NET AJAX framework would be:

var results = [];

// "#TreeView1 td"
var tds = $get('TreeView1').getElementsByTagName('td');

// would have just used Array.forEach here but
// MS borked it in debug mode for NodeList
for(var i=0, leni=tds.length; i < leni; i++) {
  var td = tds[i];
  // "td > div"
  for(var j=0, lenj=td.childNodes.length; j < lenj; j++) {
    var node = td.childNodes[j];
    if(node.nodeType === 1 && node.nodeName.toLowerCase() === 'div') {
      results.push(node)
    }
  }
}

// .css("height", "auto")
Array.forEach(results, function(element) {
  element.style.height = 'auto'
});

Now, ask your boss which one he/she would prefer to maintain. Seriously, go ask right now.

Select DOM elements using ASP.net AJAX similarly to how Jquery does it

1 Answers1