jQuery name/value pairs and operations on them

I might be so bold as to think that some jQuery user, would appreciate to be able to do this :

// inside id='container' select elements with 'style.top' present
// even more usefull: disregard top if its value is 'auto'
// attribute selection same as before

There are several plugins that implement this idea of selecting by style properties too. Let me remind you , that both attributes and css properties objects exhibit W3C Attr interface. Aka DOM Attribute node. This fact is never made obvious explicitly in the spec, but both are nothing else but name/value pairs. Can you see that? I am sure you can. What is the purpose of the above ‘~’ selection extension ? The purpose is to be able to operate on css properties and attributes, uniformly, as on NAME-VALUE pairs. To be able to treat them both as a single abstraction, as the “name/value pair” abstraction. Why? So that one can program her own OPERATORS to operate on these values. As functoids of course. Imagine an jQuery plugin called ‘formula’. Its purpose is for users to be able to change values of name/value pairs using an user defined equation, or formula. For this to happen we need to select some name/value pair and then we need to pass them all to the formula. Imagined usage :

// move everything that is movable and inside the id=container element
// for 100 units to the right
$("[~top!=auto]","#container").formula( function ( old ) {
                return old.value + 100 + old.unit ;
// in the current table,  change status of all employees which are
// older than 50
// then color their names in red
 $("[status=employed]","#people_table").formula( function ( old ) { 
   old.status = "sacked";
}).css("color", "red");
As you can see, formula() method is passed one argument, which is an json object. Which is made from attributes or style.properties as named in the selector. Format of this argument passed should be something like this :
{ owner: element, name : "top" , value : "20", unit : "px" }
// made from owner element.style.top : "20px"

{ owner: element, name : "top" , value : "auto" , unit : "" }
// made from owner element.obj.style.top : "auto"

{ owner: element, name : "data"
   , value : {
    age: 51, name: "John", sallary: 1, status: "architect"
,  unit: "" }
// made from the data attribute

And now the very interesting part. The value the function given to ‘formula()’ changes in the argument, is given back to the owner element. That is the value, and unit are changed on the owner element, after formula() worker has done its job. The new value is saved back to its attribute or style property. Compared to current code that uses ‘css()’ and ‘attr()’ this looks like an improvement.

Consider this requirement: “Using jQuery, make an element to fly (move) in a circle around a centre of the page”. I am sure you can think of an solution using css(“top” …) and css(“left” …. ) etc. Or even no jQuery. But that would be very painful. Centre of the element must be on the circular path, not its upper left corner, etc. Much more elegant to code with the ‘formula’ method:

// Circle equation: sqr(x) + sqr(y) = sqr(R)
// where Center is at the origin : 0,0
function circular_movement ( center_point, radius, sprite ){
// calculate next X for the point on the circle
// leave the result in the 'style.left' property
this.circleX = function (old) {}
// calculate next Y for the point on the circle
// leave the result in the 'style.top' property
this.circleY = function (old) {}
// do this repeatedly in predefined steps
$("#sprite[~top]").formula( this.circleY ) ;
$("#sprite[~left]").formula( this.circleX ) ;

I think using ‘formula’ will give me much cleaner and shorter code. This discussion suggests an fundamental behavioural change. Now all I have to do is to think how to implement it in some “awesome” way.

2 thoughts on “jQuery name/value pairs and operations on them”

Comments are closed.