ECMAScript 2018 Standard Method
You would use object spread:
let merged = {...obj1, ...obj2};
merged
is now the union of obj1
and obj2
. Properties in obj2
will overwrite those in obj1
.
/** There's no limit to the number of objects you can merge.
* Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};
Here is also the MDN documentation for this syntax. If you're using babel you'll need the babel-plugin-transform-object-rest-spread plugin for it to work.
ECMAScript 2015 (ES6) Standard Method
/* For the case in question, you would do: */
Object.assign(obj1, obj2);
/** There's no limit to the number of objects you can merge.
* All objects get merged into the first object.
* Only the object in the first argument is mutated and returned.
* Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);
(see MDN JavaScript Reference)
Method for ES5 and Earlier
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
Note that this will simply add all attributes of obj2
to obj1
which might not be what you want if you still want to use the unmodified obj1
.
If you're using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty
, but that code will work for 99% of cases.
Example function:
/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* @param obj1
* @param obj2
* @returns obj3 a new object based on obj1 and obj2
*/
function merge_options(obj1,obj2){
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
return obj3;
}
The jQuery constructor accepts a 2nd parameter called context
which can be used to override the context of the selection.
jQuery("img", this);
Which is the same as using .find()
like this:
jQuery(this).find("img");
If the imgs you desire are only direct descendants of the clicked element, you can also use .children()
:
jQuery(this).children("img");
Best Answer
Here we are using
.scrollTop()
for all it's worth, getting thescrollTop
value from the element with scroll-bars, and setting thescrollTop
for the other element to sync their scroll positions: http://api.jquery.com/scrollTopThis assumes that your bottom element has an ID of
bottom
and your top element has an ID oftop
.You can hide the scroll-bars for the
top
element using CSS:Here is a demo: http://jsfiddle.net/sgcer/1884/
I suppose I've never really had a reason to do this, but it looks pretty cool in action.