Issue in Creating JavaScript Selectors

Question

I have an Issue Here in creating my Selectors i do need to have it like exactly jquery do in jquery in each Set Chain it returns the Array Holding the Elements results from the selector, while i achieve this phase from scripting my selectors

var Ary = []; 
var Selector = function(selectorFormant){
// Some Script using querySelectorAll and pushing Elements to Ary
return Ary;
}

Ary.getByTypes=function(typesString){
//Some Script here take the elements inside the Ary and get the elements inside them with the specific types typesString and repush new elements in the Ary
return Ary;
}

        Selector.prototype = Ary;
        Selector.prototype.constructor = Selector;
//this script is responsible for inheritance from Ary to Selector Class

my issue here that the Developer can use the selector class in two ways

1- Selector.getByTypes('types') or

2- Selector('selector format like jquery').getByTypes('types')

in 2 i dont have to instantiate a object to apply the inheritance i preformed becuase the method Selector return the Ary which have the Function getByTypes

but in 1 i have to instantiate a object from Selector to apply the inheritance to have the Ary members for me when i dont need the developer write the new keyword

2 I dont need that- new Selector('selector format').getByTypes('types');

any one can help please :)

For "selectors exactly like jQuery" use their Sizzle library, it is also available standalone. — Bergi
– Bergi, Commented Dec 11, 2012 at 15:11
What should Selector.getByTypes('types') do? There is no selected set here. — Bergi
– Bergi, Commented Dec 11, 2012 at 15:14
The line Selector.prototype = E; does not work, as your constructor returns an object. Btw, what is E? — Bergi
– Bergi, Commented Dec 11, 2012 at 15:17
well sorry for the mistake E its Ary the question is fixed and for sizzle i know i can use it but i need to know how it made rather read all that i just asked my question :) — Marwan
– Marwan, Commented Dec 11, 2012 at 15:52

Community · Accepted Answer · 2017-05-23 12:30:12Z

1

It seems what you actually want is:

function Selector(sel) {
    // check if the constructor was used with "new". If not, correct that:
    if (! (this instanceof Selector)) return new Selector(sel);

    // Notice that "this" is an empty object, inheriting from the prototype.
    var els = document.querySelectorAll(sel);
    for (var i=0; i<els.length; i++)
        this.push(els[i]); // use the inherited method "push"
    // even though this is not an actual Array instance

    // Don't return anything, there's an implizit "return this;" as we used "new"
}

// Let the prototype object inherit from Array.prototype
Selector.prototype = Object.create(Array.prototype, {
    constructor: {value:Selector, configurable:true} // and (re)sest constructor
});

// define "getByTypes" method for all instances:
Selector.prototype.getByTypes = function(typ) {
     // Do something with "this"
     …
     // and for chainability return a Selector instance, either a new one or just
     return this;
};

If you really need Selector.getByTypes() - something like a "class method" - you could add a (completely unrelated) function on that property, doing what you want:

Selector.getByTypes = function(typ) {
    return new Selector("*").getByTypes(typ); // or anything else
};

…however, just writing Selector("button") seems easier to me if getByTypes is doing a search in the selected elements.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Dec 11, 2012 at 16:09

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Marwan Over a year ago

Nice and sooo close i think but in your answer i have to put () beside the Selector how ever i dont need that

Marwan Over a year ago

i need on of both Selector.getByTypes('text') or Selector('div').getByTypes('text')

Marwan Over a year ago

i appreciate your effort really :) +1

Bergi Over a year ago

What should Selector.getByTypes() do, on which object should it operate? If you had already answered my comment, I would've included a solution :-)

Marwan Over a year ago

that means i e need to detect wheather he puts the () beside the Selector or its a directly want to go to a function

|

leepowell · Accepted Answer · 2012-12-11 15:19:05Z

0

How about the querySelectorAll method (although only supported by newer browsers)?

https://developer.mozilla.org/en-US/docs/DOM/document.querySelectorAll

answered Dec 11, 2012 at 15:19

leepowell

3,6988 gold badges29 silver badges37 bronze badges

1 Comment

Marwan Over a year ago

i know querySelectorAll right but my point here is a new way of Selectors for example i select divs and do action on it then in the same chain i select the input types text and do another action u know what i mean

Collectives™ on Stack Overflow

Issue in Creating JavaScript Selectors

2 Answers 2

13 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related