We Keep Coding

jQuery: Order Inside .contents()

If I do this:
function getAllTextNodes(root) {
root = $(root || "body");
return root.find("*:not(iframe)").contents().filter(function() {
return this.nodeType === 3 && //Node.TEXT_NODE = 3
$.trim(this.nodeValue) !== "";
});
}
getAllTextNodes($.parseHTML("<div><div>a<div>sub</div>b</div></div>"))
the result is an array with "a", "b" and "sub". So it seems that they traverse the structure and when they reach an element they work on that element entirely before they continue with the nested elements.
While this may make sense (or it doesn't matter in some cases) it causes some troubles on my end, because I need a logic that returns the elements in the exact same order they appear in the DOM-tree, i.e. I'd be happy to see "a", "sub" and "b" being returned.
Is that something that jQuery built on purpose? Can I change the order somehow? Or is this a bug?

Is that something that jQuery built on purpose? Or is this a bug?
I don't think it's done on purpose, but given that selector APIs and even most modification methods do have their results in DOM order, it might be considered a bug. From what you show, it looks like contents is implemented with a simple flatMap(el => el.childNodes).
Can I change the order somehow?
Yes, you can use jQuery.uniqueSort() on the jQuery object, which uses Node.compareDocumentPosition internally:
return $.uniqueSort(root.find("*:not(iframe)").contents().filter(function() {
return this.nodeType === 3 && $.trim(this.nodeValue) !== "";
}));
However, jQuery isn't great with text nodes anyway. It might be simpler to use a native DOM API here, such as NodeIterator:
const it = document.createNodeIterator(root[0], NodeFilter.SHOW_TEXT, node => node.data.trim() != ""),
res = [];
for (let node; node = it.nextNode(); )
res.push(node);
return res;

How i can simplify my if condition in jQuery

I'm looking for a way to do the following:
$("#a" || "#b").val() === ""
as opposed to:
$("#a").val() === "" || $("#b").val() === ""
Any ideas?
Thanks in advance!

For two elements, I believe your example is about as short as you can make it and its meaning is clear. However, if you wish to repeat such logic or evaluate more elements, you might be able to improve upon it by creating a simple function to evaluate if any items in a set match a condition.
Extending jQuery
$.fn.any = function (evaluator) {
var items = $(this);
for (var i = 0; i < items.length; i++) {
if (evaluator(items[i]) === true) {
return true;
}
}
return false;
};
Demo: http://jsfiddle.net/xE76y/1/
This is similar to the Any() method implemented in the .Net LINQ library* (and I'm sure is implemented in other libraries, especially those geared towards functional programming). In c#, you would call such a method:
enumerable.Any( o => o.Value == "" );
JavaScript's syntax (sadly) isn't as concise; you end up with something like:
array.any( function(o){ return o.value === ""; } );
So far, this hasn't saved you anything. However, if you want to iterate over a large number of elements, it becomes much more elegant.
// there could be zero inputs or 100 inputs; it doesn't matter
var result = $("input").any(function (o) {
return o.value === "";
});
Native Solution
Note that we aren't relying on jQuery in our any() method. You could also consider a native JavaScript solution such as the Array.some() method.
some() executes the callback function once for each element present in
the array until it finds one where callback returns a true value. If
such an element is found, some immediately returns true.
Demo: http://jsfiddle.net/xE76y/2/
var result = jQuery.makeArray($("input")).some(function (o) {
return o.value === "";
});
Since this is an array method, it only works on an array. This unfortunately means that document.getElementsByTagName("input").some(...) will not work since getElementsByTagName() returns a NodeList.
Of course, you could push whatever you wanted into an array and call some() on that array. The call to jQuery.makeArray() in the example is just for convenience.
Abstracting the Evaluation Functions
Demo: http://jsfiddle.net/xE76y/3/
Perhaps the evaluation functions (such as testing for an empty string) will be reused. These can be abstracted further.
// ideally, this should NOT be left in global scope
function isEmpty(input) {
return input.value === "";
}
// the check now fits nicely in one line.
if ($("input").any(isEmpty)) {
alert("At least one input is empty.");
}
The resulting method calls are quite clean: $("#a, #b").any(isEmpty) and $("input").any(isEmpty)
* Also worth noting that LINQ has been recreated for JavaScript.

Try like this instead:
if ($('#a,#b').is(':empty'))
{
alert("Either a or b is Empty!");
}
Try my demo
Edit:
If it is an input type like a textbox then it would be a little bit bulky but will achieve the same effect:
if ($.inArray("",[ $("#a").val(), $("#b").val() ])>=0)
{
alert("Either a or b is Empty!");
}
See another Demo

If you want to avoid duplication of the empty string "", you could do this:
if ($.inArray([ $("#a").val(), $("#b").val() ], ""))
Or if you only want to select once with jQuery:
if ($.inArray($("#a, #b").map(function() { return this.value; }), ""))
But I wouldn't use either of these myself. They are arguably both less efficient, more contrived, and certainly less readable than the "easy" way!

I'm not an expert in javaScript, but have you cross checked with :
http://api.jquery.com/multiple-selector/
jQuery selector regular expressions
Also, one way would be using the .each function as in
jQuery Multiple ID selectors

Array find, natively or through jQuery?

Would you do this sort of thing?
var getBoard1 = function(id) {
return $.grep(me.boards, function (board) {
return board.Id == id;
});
};
Or this sort of thing?
var getBoard2 = function(id) {
for (var i = 0; i < me.boards.length; i++) {
var board = me.boards[i];
if (board.Id == id)
return board;
}
return null;
};
And why, in the context of correctness, readability and performance would you prefer that way? If you would rather do it in a third way, please share.

This is what the grep function looks like (jQuery v1.8.2):
grep: function( elems, callback, inv ) {
var retVal,
ret = [],
i = 0,
length = elems.length;
inv = !!inv;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
}
Essentially, you're doing the same so it wouldn't be much of a difference when it comes to performance. When I look at the jQuery code, they always return an array, where you return null. If you're using jQuery already, I would go for the jQuery version since it's better readable, otherwise go with native code.
* -- EDIT -- *
When looking at the code, this made me realize it does make a difference. Your code already returns (and finishes the loop) when it found the first item (expecting only one single result), where jQuery loops through all the items. So, if you expect only one result, your version would be faster.

jQuery provides convenience methods, in the background it will probably do something similar. If you are already using jQuery then you can take advantage of this, I would however not include jQuery just for one bit of code like this. It entirely depends on your situation.
As for performance, try it, see what your results are.

If you already have a dependency on jQuery then do it the first way because it's shorter and reads easier. In the very unlikely case that this function is your bottleneck and performance is not acceptable then you can start thinking about alternate implementations.
If you don't already depend on jQuery then the second version is preferable because the tradeoff (including jQuery vs writing a few more lines of code) is not worth it.

I would use the native Array.filter() which is probably the fastest if you don't care for Browsersupport (IE8- will die on this).
a.filter(function(e){return e.id == id});
This returns, same like jQuerys grep an array where you would have to fetch the first value.

My JQuery exist function: does it make sense or not?

I'm a bit confused the last couple a days. I use my JQUERY selectors whenever I like... but I didn't check whether a selector exist or not, instead I used the .each function.
var exist = function(obj){
var returnObject ={};
for(var key in obj){
if(obj[key].length){
returnObject[key] = obj[key];
}else {
return false;
}
}
return returnObject;
}
//define all your selectors that would be needed for core functionality.
var activeSelectors = exist({
selList : $('div.selectorone'),
selTag : $('a#tagtwo'),
selFloat : $(div.float) /*etc etc*/
})
if (activeSelectors) {
console.log('all my core selectors are here!');
/* do Stuff*/
}
I know this looks a bit much, especially if you need only one selector, but I can't figure out a better way (except a lame if statement at every selector). I saw people using
$('div#mySelector').each(function(){ /* do stuff*/});
but I don't agree that it's nice. Notice that #mySelector (because it's an id) is only once allowed.
I would love the feedback. Please consider the performance vs Nice programming.
for more info please comment below or contact me!

If I really wanted to avoid just using a plain if statement, then I'd probably just go with a simple function like this:
var exists = function()
{
for (var i in arguments)
{
if ($(arguments[i]).length == 0)
{
return false;
}
}
return true;
}
And invoke it like this:
var list = $('div.selectorone');
var tag = $('a#tagtwo');
var float = $('div.float');
if (exists(list, tag, float))
{
// Do some stuff.
}
Or:
if (exists('div.selectorone', 'a#tagtwo', 'div.float'))
{
// Do some stuff.
}
I do think you're over-engineering the problem though. All you really need to do is check the length property on each of the selections you've made (i.e. the list, tag, float variables).
Also, performance is a complete non-issue here; is the method of checking whether the elements exist actually going to affect the user experience for your site? As Donald Knuth said:
We should forget about small
efficiencies, say about 97% of the
time: premature optimization is the
root of all evil.

Number of elements in a javascript object

Is there a way to get (from somewhere) the number of elements in a Javascript object?? (i.e. constant-time complexity).
I can't find a property or method that retrieves that information. So far I can only think of doing an iteration through the whole collection, but that's linear time.
It's strange there is no direct access to the size of the object, don't you think.
EDIT:
I'm talking about the Object object (not objects in general):
var obj = new Object ;

Although JS implementations might keep track of such a value internally, there's no standard way to get it.
In the past, Mozilla's Javascript variant exposed the non-standard __count__, but it has been removed with version 1.8.5.
For cross-browser scripting you're stuck with explicitly iterating over the properties and checking hasOwnProperty():
function countProperties(obj) {
var count = 0;
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
++count;
}
return count;
}
In case of ECMAScript 5 capable implementations, this can also be written as (Kudos to Avi Flax)
function countProperties(obj) {
return Object.keys(obj).length;
}
Keep in mind that you'll also miss properties which aren't enumerable (eg an array's length).
If you're using a framework like jQuery, Prototype, Mootools, $whatever-the-newest-hype, check if they come with their own collections API, which might be a better solution to your problem than using native JS objects.

To do this in any ES5-compatible environment
Object.keys(obj).length
(Browser support from here)
(Doc on Object.keys here, includes method you can add to non-ECMA5 browsers)

if you are already using jQuery in your build just do this:
$(yourObject).length
It works nicely for me on objects, and I already had jQuery as a dependancy.

function count(){
var c= 0;
for(var p in this) if(this.hasOwnProperty(p))++c;
return c;
}
var O={a: 1, b: 2, c: 3};
count.call(O);

AFAIK, there is no way to do this reliably, unless you switch to an array. Which honestly, doesn't seem strange - it's seems pretty straight forward to me that arrays are countable, and objects aren't.
Probably the closest you'll get is something like this
// Monkey patching on purpose to make a point
Object.prototype.length = function()
{
var i = 0;
for ( var p in this ) i++;
return i;
}
alert( {foo:"bar", bar: "baz"}.length() ); // alerts 3
But this creates problems, or at least questions. All user-created properties are counted, including the _length function itself! And while in this simple example you could avoid it by just using a normal function, that doesn't mean you can stop other scripts from doing this. so what do you do? Ignore function properties?
Object.prototype.length = function()
{
var i = 0;
for ( var p in this )
{
if ( 'function' == typeof this[p] ) continue;
i++;
}
return i;
}
alert( {foo:"bar", bar: "baz"}.length() ); // alerts 2
In the end, I think you should probably ditch the idea of making your objects countable and figure out another way to do whatever it is you're doing.

The concept of number/length/dimensionality doesn't really make sense for an Object, and needing it suggests you really want an Array to me.
Edit: Pointed out to me that you want an O(1) for this. To the best of my knowledge no such way exists I'm afraid.

With jquery :
$(parent)[0].childElementCount