extending jQuery selectors

[slevinkelevra]

Καλησπερα

 

Εχω παθει ενα μικρο brainfart , ειναι περασμενη και η ωρα, οποτε θελω λιγο τη βοηθεια σας. Διαβαζω για extending τα jquery selectors.

 

Αν καταλαβα καλα σε καθε extend φτιαχνουμε ενα δικο μας custom selector. Εχει λοιπον μια callback function που τσεκαρει καθε element που θα του βαλουμε/δωσουμε και επιστρεφει true αν το συγκεκριμενο element που μολις τσεκαριστικε "περασε το τεστ" της callback. Και τα μαζευει μετα ολα αυτα και τα κανουμε οτι θελουμε. Oh kay!!!

 

Τι ειναι αυτοι οι σαταναδες που εχει μεσα η callback? 

Εχουμε 

$.extend($.expr[':'],{
	block: function(e,i,m,s) {
		return $(e).css('display') === 'block';
	}
});

οπου 

 

• e is the element currently being checked.
• i is the index of that elements within all elements being checked (starts at zero)
• m stands for match and is additional information that we can use in our function.
• s stands for stack and is all elements in the current selection or stack

so $(e) makes the current element e into a jQuery object
i allows us to check for the 3rd, 6th, 23rd thing

 

m contains the following:

[0] is the actual selector called. For example :anyof(“div,4,hr,10″)
[1] is just the selector name. For example: anyof
[2] is the type of quotes used (if any) in the selector. So ” would be returned for :anyof(“div,4,hr,10″)
[3] is any parameters used in the form of a string so “div,4,hr,10″ from above

 

and s contains an array of one or more html elements.

 

Δηλαδη

• e ειναι αυτο που τσεκαρουμε τωρα,
• i περιεχει το index αυτου που εχει τσεκαριστει τωρα [ανεξαρτητα αν ειναι match η οχι]
• m[3] εχει ενα string ενωμενο με κομματα που περιεχει οτι εχει τσεκαριστει μεχρι τωρα και ειναι match???
• τι στο καλο ειναι το s ρε παιδια???

Με βοηθησε λιγο  Site: αυτο , αλλά, απο καποια άλλα παραδειγματα το μυαλο μου εγινε σαλατα. 

Αυτα....

 

Καποιος να εξηγησει? Η να δωσει λινκ για insomniacs που καηκανε?

 

Ευχαριστω πολυ

[alou]

H m[3] έχει ότι input δώσεις στο φίλτρο, η s είναι το set των στοιχείων πριν εφαρμοστεί το φίλτρο / function.

 

Για το s δεν ξέρω τι παράδειγμα μπορεί να δώσει κάποιος αλλά φαντάσου ότι θες να φτιάξεις ένα φίλτρο που να τσιμπάει elements ανάλογα με το περιεχόμενό τους.

$.extend($.expr[':'],{
	hasword: function(e,i,m,c) {
		return $(e).text().indexOf(m[3]) > -1; //εδω χρησιμοποιούμε το m[3]
	}
});

Οπότε, αν θες να βρεις ότι παράγραφο έχει μέσα τη λέξη insomnia,

var test =$('p:hasword("insomnia")');

ή με μια άλλη σύνταξη

var test =$('p").filter(':hasword("insomnia")');

που βολεύει αν έχεις ήδη object set.

 

Γενικά, βολεύει να έχεις υπόψιν και την χρήση του extend, που μπορεί να αφορά και 2 οποιαδήποτε object.

Ένα απλό παράδειγμα:

var first = {
	"name" : "Andreas",
	"origin" : "Earth"
};

var second = {};
console.log(second.name);//undefined
$.extend(second, first);
console.log(second.name);//Andreas

οπότε, έχεις στο μυαλό σου ότι με την extend, προσθέτεις στο object $.expr[':'] ότι υπάρχει μέσα στο δεύτερο object σου (hasword:... και θα μπορούσε να έχει άλλα 10 attributes ή functions).

[slevinkelevra]

Ωραια απαντηση ευχαριστω πολυ. Καταλαβα τι κανει το m [3]

 

Βεβαια το s παραμενει λιγο θολο. Στο link που εδωσα στην αρχη , στο op το οριζει ως "s stands for stack and is all elements in the current selection or stack" ενω το Learning jQuery Third Edition, ως "The entire set of DOM elements matched up to this point. This parameter is rarely needed." Επειδη ειναι πολυ γενικα αποφασισα να φτιαξω ενα κωδικα μπας και δω τι ειναι το s

//html
<div id="one">scott</div>
<div id="two">scottpilgrim</div>
<div id="three">scottpilgrimvs</div>
<div id="four">scottpilgrimvstheworld</div>

//jquery
	$.extend($.expr[':'],{
		findScott: function(e,i,m,s) {
			if($(e).text().indexOf(m[3]) > -1){
				console.log(s);
				return $(e);

			}
		}
	});
	
	var test =$('div:findScott("vs")');
	alert ("test : "+test.text());

Το alert δουλευει κανονικα , αλλα το console. log( s ); μου δινει ενα undifined πραγμα [συννημενη εικονα]. Τι γινετε παλι? Γιατι δεν εμφανιζει κατι? 

 

 

 

βιβλιο : "Learning jQuery Third Edition" , Jonathan Chaffer, Karl Swedberg, PACKT publishing, pp. 236

 

 

 

 

Ευχαριστω και παλι

[alou]

Εύλογη η ερώτηση, το ίδιο είχα και εγώ σαν απορία και το μόνο που μπορώ να σου πω σαν συμπέρασμα (γι'αυτό είπα ότι δεν ξέρω τι παράδειγμα μπορεί να δώσει κάποιος) είναι το εξής:

 

Αν κάνεις console.log και το i(ndex) θα δεις ότι επαναλαμβάνεται το 0 για όλα τα element που εξετάζονται στο φίλτρο. Άρα και το index δεν αναφέρεται στο σύνολο των elements που δηλώνεις προς φιλτράρισμα, αφού σε κάθε iteration, ξεκινάει από το 0 - άρα και το object set / "The entire set of DOM elements matched up to this point" όπως το αναφέρει στο βιβλίο, σε εκείνο το σημείο είναι πάντα το ίδιο το στοιχείο και τίποτα παραπάνω (ή έτσι φαντάζομαι).

 

Άρα, στις περιπτώσεις που εξετάσαμε και σε όσες μπορούσα να σκεφτώ και δοκίμασα, δεν υπάρχει κάποιο collection και η αλήθεια είναι ότι δεν μπορώ να φανταστώ σε ποιες περιπτώσεις θα μπορούσε να υπάρχει.

 

Με μια ματιά που έριξα και στο jquery είδα ότι μπλέκεται το Sizzle σαν css engine ( jQuery.expr = Sizzle.selectors; )  και το έχασα οπότε δεν το ψάχνω άλλο, θεωρόντας ότι λογικά δεν υπάρχει στις τρέχουσες εκδόσεις καν διαθέσιμο.

 

Και αυτό είναι το πιο πιθανό, μια και βλέπω ότι πλέον, ο τρόπος που προτείνεται για να κάνεις extend pseudo selectors είναι όπως περιγράφεται στο sizzle:

https://github.com/jquery/sizzle/wiki/Sizzle-Documentation#sizzleselectorscreatepseudofunction

 

Αν δε βαριέσαι, κάνε μια δοκιμή με αρκετά παλιά έκδοση του jQuery να δεις τα αντίστοιχα console logs και ίσως το επιβεβαιώσεις

[slevinkelevra]

Απ οτι ειχα διαβασει καπου, το sizzle και η jquery ηταν παραλληλα προτζεκτ του ιδιου τυπακου-δημιουργου της jquery. Ενσωματωσε το sizzle στη jquery, ειναι ο τροπος για να επιλεγεις elements με css. Δηλαδη το $(' . nameOfClass') ειναι επιρροη της sizzle. 

 

Οσο για το s ειναι deprecated απο καποιες εκδοσεις jquery και μετα. Ρωτησα παραλληλα και στο stackoverflow [εκανα και λαθος στον αρχικο μου κωδικα ο στοκος]. 

 

Δες Site: εδω , η πιο ολοκληρωμενη απαντηση ειναι του p.s.w.g

 

Thanks και παλι για το χρονο σου =)

[alou]

Νο προμπλεμ, είχα και εγώ την απορία ούτως ή άλλως και το deprecated έκανε μπαμ.