We Keep Coding

How to add a class to all similar elements with an index less than the clicked element with jquery?

I have 8 elements in sequence that each represent a yoga pose. When one of these elements is clicked I want to add/remove classes for all the pose cards that come before and after the clicked element. So far I have been able to get the index of the clicked element using the following:
$(".pose-card").click(function () {
clickedPoseIndex = $(".pose-card").index(this);
});
And then I tried to use a filter function to get the ones whose index is less than the clicked one with something like this:
let prevPoses = $(".pose-card").filter(function () {
return parseInt($(".pose-card").index(this) < clickedPoseIndex);
});
But that did not work! Please let me know if you can think of any better solutions. Much appreciated!

What you want to do inside filter is get the index as int (hence the parseInt function) and compare with the value you've stored in clickedPoseIndex which is already an int. You've simply missed a bracket or misplaced one. All you have to do is:
let prevPoses = $(".pose-card").filter(function () {
return parseInt($(".pose-card").index(this)) < clickedPoseIndex;
});
Edit
Don't need to use parseInt either as the value returned is already an int so:
return $(".pose-card").index(this) < clickedPoseIndex;

How to get an id , baseUri from jQuery object and use it as string

I have a Jquery object like the example below
[li#myid.item.fr-hide, prevObject: _.fn.init[1], context: a.link.pjaxload]0: li#myid.item.fr-hidecontext: a.link.pjaxloadlength: 1prevObject: _.fn.init[1]__proto__: _[0]
The object has an arrow pointing down and when i click the arrow , there are some other variable arrows namely 0: li#myid.item.fr-hide,accesskey etc. And when i click the 0, there are some more collections and among which is the baseUri.The baseUri contains a string uri with the part of the string which is myid.
I want to compare and check that object all the time if part of that baseUri example
//www.mydomain.com/myid?l=FR
contains myid . I tried everything possible but because my object is not a string i just count get it going/comparing
i tried.
if(/myid/i.test($active.item.get(0).outerHTML){
}
It failed.
I tried
if(/myid/i.test($active.item.id.outerHTML){
}
It failed. I tried many more that i lost count. Note myid is an element that has id and its id is what i am after. But the id is also contain in the baseUri. Please any help would be appreciated.

I finally get it going. active.item is a jQuery object. Below is what works for me
var $elementid = active.item.get(0).id;
if(active.item) {
if(page.language() === 'FR' && /myid/i.test($elementid)){
//My code
}
}
Another issue i encounter was var $elementid = active.item.get(0).id; passed my element id value to $elementid. However
if(page.language() === 'FR' && /myid/i.test($active.item.get(0).id)){
//My code
}
The above failed and always return false. When i log active.item.get(0).id on the console, it turns out it returns an object not my id . This i am not sure though , looking for a better explanation as well.

jQuery filter method usage

What's the use of below snippet ? I extracted it from jQuery API. I don't understand it:
$("div").filter( $("#unique") )
Please be kind enough to explain this to me.

It is extracting the only one div with id=unique.
$('div'). // return all divs
filter( $('#unique') ); // take the div with id=unique
So. this statement will return you the div with id=unique.
Note
This statement can also be written as $('div#unique') or just $('#unique').

The filter method enables you to filter out only specific elements from amongst a selection. Say you want to choose all spans whose text contains more than 3 characters. So you would do this:
$("span").filter(function() { return $(this).text().length > 3; }).click(...);
The function should check for some condition and return a boolean. if it sends true that element is kept in the selection, else discarded. So for your current question, it would

How to phrase 'has not' in jquery?

For a page in our app there is a certain number of customers that are generated in a list when the page is loaded. As one scrolls down on this page more customers are generated towards the bottom of the list, and so forth till one scrolls all the way down and there are no more customers to generate.
I am trying to check, within an .on() function, if the new generated customers at the bottom has a clock icon, and if not then to add a clock icon to the new customers. This is my check:
var isClock = $(timepickers).parent().has('.clockIcon').length ? '' : addClock;
if (typeof isClock === 'function') {
isClock();
}
The problem is that the customers that were originally there to start with on the page, of course have the clock icon, so because some of the customers have a clock icon its not adding it to any of the ones that don't have one now. The .has() makes more since, but I like the idea of the .is() because of what it says on the jquery website:
Check the current matched set of elements against a selector, element, or jQuery object and return true IF AT LEAST ONE of these elements matches the given arguments.
And thats what I needed for it to check if ANY of the customers don't have the clock icon then to add it. I cannot think of way to use the .is() so instead I am thinking to use the .not() or not: to see if any of the customers don't have the clock icon then run the function. But I am not sure how to say 'if something does not have something' not 'if something is not something'. Anyone know how to do this????

Use not() instead of has()

Just negate the expression?
var isClock = ( ! $(timepickers).parent().has('.clockIcon').length ) ) ? '' : addClock;

first thing i thought of, was http://api.jquery.com/attribute-contains-word-selector/
$(timepickers).parent().find('class=~"clockIcon"').length ? '' : addClock;
but it might not even be the simplest for your case

While not too pretty (I don't know jQuery) this would fire the event if the elements with the icon doesn't equal the total amount of elements
var isClock = $(timepickers).parent().has('.clockIcon').length == $(timepickers).length ? "" : addClock;
if (typeof isClock === 'function') {
isClock();
}
That being said, I'm sure there is a concise way to do this with proper jQuery

See jQuery .not(). Also use .each that way you can go over each item's parent and check it individually:
$(timepickers).each(function () {
// If the parent doesn't have clockIcon then add it
if (!$(this).parent().hasClass('clockIcon')) {
addClock();
}
});

Javascript Regex and getElementByID

I'm trying to search for all elements in a web page with a certain regex pattern.
I'm failing to understand how to utilize Javascript's regex object for this task. My plan was to collect all elements with a jQuery selector
$('div[id*="Prefix_"]');
Then further match the element ID in the collection with this
var pattern = /Prefix_/ + [0 - 9]+ + /_Suffix$/;
//Then somehow match it.
//If successful, modify the element in some way, then move onto next element.
An example ID would be "Prefix_25412_Suffix". Only the 5 digit number changes.
This looks terrible and probably doesn't work:
1) I'm not sure if I can store all of what jQuery's returned into a collection and then iterate through it. Is this possible?? If I could I could proceed with step two. But then...
2) What function would I be using for step 2? The regex examples all use String.match method. I don't believe something like element.id.match(); is valid?
Is there an elegant way to run through the elements identified with a specific regex and work with them?
Something in the vein of C#
foreach (element e in
ElementsCollectedFromIDRegexMatch) { //do stuff }

Just use the "filter" function:
$('div[id*=Prefix_]').filter(function() {
return /^Prefix_\d+_Suffix$/.test(this.id);
}).each(function() {
// whatever you need to do here
// "this" will refer to each element to be processed
});
Using what jQuery returns as a collection and iterating through it is, in fact, the fundamental point of the whole library, so yes you can do that.
edit — a comment makes me realize that the initial selector with the "id" test is probably not useful; you could just operate on all the <div> elements on the page to start with, and let your own filtering pluck out the ones you really want.

You can use filter function. i.e:
$('div[id*="Prefix_"]').filter(function(){
return this.id.match(/Prefix_\d+_Suffix/);
});

You could do something like
$('div[id*="Prefix_"]').each(function(){
if($(this).attr('id').search(/do your regex here/) != -1) {
//change the dom element here
}
});

You could try using the filter method, to do something like this...
var pattern = /Prefix_/ + [0 - 9]+ + /_Suffix$/;
$('div[id*="Prefix_"]').filter(function(index)
{
return $(this).attr("id").search(pattern) != -1;
}
);
... and return a jQuery collection that contains all (if any) of the elements which match your spec.
Can't be sure of the exact syntax, off the top of my head, but this should at least point you in the right direction