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, Dec 11 '12 at 15:11
What should `Selector.getByTypes('types')` do? There is no selected set here. — Bergi, Dec 11 '12 at 15:14
The line `Selector.prototype = E;` does not work, as your constructor returns an object. Btw, what is `E`? — Bergi, Dec 11 '12 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, Dec 11 '12 at 15:52
all my point here is doing more than 1 operation on the same chain level on defferent types of elements like select the divs display them and then select the child texts of this divs and clear them thats a simple example Selector('div').Show().getByTypes('text').Val('') — Marwan, Dec 11 '12 at 15:56

score 1 · Accepted Answer · edited May 23 '17 at 12:30

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 '17 at 12:30

Community

1
1

answered Dec 11 '12 at 16:09

Bergi

630,263
148
957
1,375

Nice and sooo close i think but in your answer i have to put () beside the Selector how ever i dont need that – Marwan Dec 11 '12 at 16:25
i need on of both Selector.getByTypes('text') or Selector('div').getByTypes('text') – Marwan Dec 11 '12 at 16:26
i appreciate your effort really :) +1 – Marwan Dec 11 '12 at 16:27
What should `Selector.getByTypes()` do, on which object should it operate? If you had already answered my comment, I would've included a solution :-) – Bergi Dec 11 '12 at 16:28
that means i e need to detect wheather he puts the () beside the Selector or its a directly want to go to a function – Marwan Dec 11 '12 at 16:28
Selector.getByTypes('button') should return all the buttons on the document directly on the other hand Selector('div').getByTypes('button') get all the buttons only which its parent is div – Marwan Dec 11 '12 at 16:35
its sorta a new way of doning selectors to do multiple operations in the same chain rather i need to do something to the divs first then need to do something else for the buttons its more likely to be written in the same line – Marwan Dec 11 '12 at 16:38
ok but how about i need to do the following Selector('div').Show().getByTypes('text').Val('') – Marwan Dec 11 '12 at 16:46
Add the `Show` and `Val` methods to the prototype then? – Bergi Dec 11 '12 at 16:49
you sound logic ok but is there a way that we can do what i said :) Selector.getByTypes directly i know it sounds not logical but is there is a way :) – Marwan Dec 11 '12 at 16:51
please answer if there is no way i will hit the correct sign beside your answer any way so save my time please :) – Marwan Dec 11 '12 at 16:58
the question now can we make the instance member also available as static member without writing much scripts ? – Marwan Dec 12 '12 at 07:40
What do you mean, creating "class methods" programatically from all prototype methods? – Bergi Dec 12 '12 at 15:13

score 0 · Answer 2 · answered Dec 11 '12 at 15:19

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 '12 at 15:19

leepowell

3,838
8
27
35

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 – Marwan Dec 11 '12 at 15:54

Issue in Creating JavaScript Selectors

2 Answers2