JQuery Isotope number filter - javascript

I've been playing around with the isotope plugin and I think it's great!
However, it's only keyword based. What If I want to do some math filtering like adding a class: .age-35. Then, in my filter I want to select for example age > 30.
Is something like this possible or isn't this what isotope is designed for?
I've been trying to find some fiddles on the use of 'number filtering' but I can't find anything.

The sort methods just need to return a number for each supplied element. It is called once for each element that needs sorting (i.e. the visible ones). What number it returns is up to your imagination.
e.g. You can extract attribute values from any part of the element (class, data-???, etc) and parse them into a number then return the number.

Related

Asserting multiple values in a single element in nightwatch.js

Ok, so what I would like to do is get all the values (in this case; colours) in the element(s) listed below;
I was wondering if I can get all these values/colours from the element in a single function or command?
To complicate things though, the class listed within the element (seo-crawl-paths__group__link) is 'dynamic', so the number of classes within the element, and thus the number of values, will change on a daily basis (i.e. tomorrow, only some of the colours will be listed in the element).
Therefore, I can't simply get the value of each individual class within the element, as the number of classes will change.
A command similar to .getValue() but for multiple values?
Many thanks :)

Select list search on very large dataset

Currently I have Select2 in my application, and have previously implemented ajax calls to the database to get a smaller subset based on search query entered by a user.
However, users want to be able to click the back arrow on the browser, and have the query automatically run again (something that currently does not happen with Select2). I was able to implement this by pulling the entire dataset (over 18,000 elements) in and calling select2 on that.
The problem with this is that Select2 basically does a foreach in a foreach when doing a search (foreach element in the dataset, go through each string and get the index of the query - which I understand is basically breaking the string into a char array and checking each char individually to see if the combination is found). So every time someone types a character, we're looking at over 18,000 operations, even though the majority of elements are eliminated as options.
Is there a way to make Select2 actually eliminate the options that don't match (create and bind to a temp array or something like that) or perform a binary search instead of a linear search? If not, are there any alternatives to Select2 that DO implement binary search instead of linear search, or would I need to create my own jQuery plugin to do this?
In this jsfiddle1 a hidden select element is used and a clone of that to filter input. The filtering is done with:
for (var i = 0; i < that.selector.options.length; i++) {
if (re.test(that.selector.options[i].text)) {
sclone.add(new Option(that.selector.options[i].text, i));
}
}
Where re is a RegExp created from an input field that placed above the select clone.
Maybe that's an idea to play with?
1 The language used in the first selector is dutch, but I suppose that shouldn't be obstructive to the idea.

jquery sort & filter table

I have a problem with sorting and filtering html table.
I use jQuery propdown Table Filter plugin
and it works perfectly well for me, but,
For now it looks like this:
But problem is i also need sort my table by values (A-Z/Z-A), and I'm not strong via JQuery to re-write this plugin. It must look like this (add sorting options to select):
Can you give me direction, where I can look? I find a lot of jQuery plugins, but none did what I need.
have you perhaps thought of using JQuery Datatables??
They are really easy to use and you can sort your columns and filter the data (search box performs filter on all columns based on input text) by default.
http://www.datatables.net/
For the Above sorting you can check ascii value of the character and then sort the character according to it.
For the NON English character, find the ascii value and then sort it.
For e.g.
"ABCDEF".charCodeAt(0) // return 65
Same way for
"CÃNT".charCodeAt(1) // return 195
May this will help you

Alternative to jQuery's .last

I need to use the 1.3.2 library which unfortunately does not support the last functionality. This causes my function to fail:
$op.last().next().after($op);
"$op.last is not a function"
Demo:
http://jsfiddle.net/uscyH/
I have been unsuccessful at rewriting this functionality in pure js, any suggestions? Note, I will also need the .first(), but I'm assuming I will be able to extrapolate that from the .last alternate code. Many thanks-
You can use the :last selector, which existed since 1.0:
$op.filter(':last')
To get the last element, do this:
$op.slice( -1 )
Live demo: http://jsfiddle.net/uscyH/4/
The jQuery .slice() method is patterned after the JavaScript .slice()
method for arrays. One of the features that it mimics is the ability
for negative numbers to be passed as either the start or end
parameter. If a negative number is provided, this indicates a position
starting from the end of the set, rather than the beginning.
Source: http://api.jquery.com/slice/
To get the first element do this:
$op.eq( 0 )
Live demo: http://jsfiddle.net/uscyH/5/
Assuming $op is the collection of options, get the first DOM element in the collection using:
var first = $op[0];
and the last using:
var last = $op[$op.length-1];
It looks like you could find the last or first item with this method
http://jsfiddle.net/uscyH/3/
alert("Last is: "+$("option:last").html()+" and first is: "+$("option:first").html());​
Update: Looks like you have lots of ideas to choose from now. Feel free to use whatever approach you would like. This approach is probably not the fastest one since it is doing two DOM queries instead of operating on the list you already appear to have stored in an array. It's nice to see how jQuery has been so powerful even back in these versions. Thanks for the ideas everyone!
$($op[$op.length-1]).next().after($op);
You can also choose to extend jquery and create your own last method.

JQuery Add two selections together

With the power of jquery...
I'm attempting to add two selections together, they both contain the same type of element (<option>).
But the add(..) method doesn't seem to be playing ball.
var matchingRemovedOptions = removedOptions.filter(function() {
return this.text.toLowerCase().match(str.toLowerCase());
});
tempOptions.add(matchingRemovedOptions);
console.log(tempOptions.length);
console.log(matchingRemovedOptions.length);
As you can see im trying to filter out some option elements from the removedOptions selection and add these to the tempOptions selection.
But when using the console.log, the length of tempOptions stays the same as in, does not increase.
.add() returns a set with the elements/selector added, it doesn't actually add them to the set that it's called on. To get the effect you want, you need to update to the set it returns, like this:
tempOptions = tempOptions.add(matchingRemovedOptions);
If you think about all other tree traversal functions, they behave the same way, for example obj.find("...") doesn't change obj to what's found, only the rest of the chain operates on that set, which .find() returns.
You need to do another assignation:
tempOptions = tempOptions.add(matchingRemovedOptions);

Categories