Need help with querySelector alternative

Posted on 2012-09-05
Last Modified: 2012-09-05
Hey All,

I'm using mootools and need help with an alternative to "querySelector" and "querySelectorAll" since its not working in ie.

This is the line I need help with:

var listitem = content.querySelector(".list ul li");

var allContent = content.querySelectorAll(".listpage");

Any help would be great. Thanks.
Question by:yando18
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Don't you just use the native Mootool selectors: $, $$, $E, $ES:

    var listitem = $E('.list ul li');
    var allContent = $$(".listpage");

    Author Comment

    Here is the full code. Its tabbed content. I have tried to implement what you have above but still get an error in ie for querySelector. I'm missing something.

        var content = $("listContent");
        if (content) {
            var listitem = content.querySelector(".list ul li");
            var idCheck ="_")[1];
            var pages = content.querySelectorAll(".listpage");
                for (var i = 1; i < pages.length; i++) {
                  pages[i].setStyle('display', 'none');
            var tabs = content.querySelectorAll(".bbtabs ul li");
                for (var i = 0; i < tabs.length; i++) {
                  tabs[i].addEvent('click', function (){
                      var current = this.parentNode.getProperty("data");
                      $$("#tabHeader_" + current).removeClass("active");
                      $$("#listpage_" + current).setStyle('display', 'none');
                      var idCheck ="_")[1];
                      $$("#listpage_" + idCheck).setStyle('display', 'block');

    Open in new window

    LVL 42

    Accepted Solution

    I don't really use MooTools, but your code seems to be using traditional javascript within your MooTools code. While that's not wrong, MooTools should offer you most of what you need, and make things easier

    Here's a more MooTools way to do it. Not complete code, but should give you more of an idea.

    window.addEvent('domready', function() {
    	var content = $("content");
    	if (content) {
    		var listitem = content.getElement(".list ul li");
    		var idCheck ="_")[1];
    		var tabs = content.getElements(".bbtabs ul li");
    		content.getElements(".listpage").each(function(el) {
    			el.addEvent('click',function() {
    				//put your click code in here.

    Open in new window


    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now