We Keep Coding

Getting all selectors and printing its value to console

I am on the following site : Betway and want to extract via a query all the values from the selector collectionitem with the class oneLineEventItem.
I can partially get this with the following:
document.querySelectorAll("div[collectionitem] ~ .oneLineEventItem").forEach((result) => {
console.log(result)
})
However I have noticed the following issues with this:
It selects n-1 such that the first is not selected.
It prints the node tree and not just the values.
How do I correctly select all and print the values out?

Using the General sibling combinator (~) is not the good approach. To select all div elements having the attribute collectionitem and the class oneLineEventItem you should use the following selector :
div[collectionitem].oneLineEventItem
Then, as I said in my comment, you can get the value of the collectionitem attribute using the getAttribute() method :
document.querySelectorAll("div[collectionitem].oneLineEventItem").forEach((result) => {
console.log(result.getAttribute("collectionitem"));
})
<div collectionitem="test1" class="oneLineEventItem">foo</div>
<div collectionitem="test2" class="oneLineEventItem">bar</div>

how to select second object's second element with same classname in protractor

HTML Coded snippet is here
Using protractor, when am writing the following code, am only able to select the 3rd element from the first matching class
var items = element(by.css('.swatches.swatches_size.swatches_find-box')).all(by.tagName('label'));
items.get(2).click();
What would be the way to select 2nd element from the second matching class?
The code snippet is in the attached image

its element.all(by.css('.swatches.swatches_size.swatches_find-box')).each(function (element, index) {

You can just chain element() and all():
$$('.swatches.swatches_size.swatches_find-box').get(1).all(by.tagName("label")).get(1);
where $$ is a shortcut to element.all(by.css("...")).
Or, an alternative approach would be to use a single CSS selector with the help of nth-of-type and nth-child pseudo classes:
$(".swatches.swatches_size.swatches_find-box:nth-of-type(1) label:nth-child(1)")

Thanks for the responses. Here is what I did to select the third element of the second matching DIV:
element.all(by.css('.swatches.swatches_size.swatches_find-box label')).
each(function(element, index) {
element.getText().then(function(text) {
if (text === waist) {
element.click();
}
if (text === length) {
element.click();
}
});
});

Instead of .get(1), .get(2), .get(3), etc. now you can use more readable functions like .second(), .third(), .fourth() etc. - I developed a small package - https://github.com/Marketionist/protractor-numerator - that can be used with protractor to select second, third, fourth, etc. elements.
So, applied to your case (to select 2nd element from the second matching class), it would be much more readable and will look like this:
var itemSecond = element.all(by.css('.swatches.swatches_size.swatches_find-box')).second().all(by.tagName('label')).second();
itemSecond.click();

Put value of buttons into array

I currently have about a dozen html buttons on a page, all with a unique value attribute assigned to them.
Firstly, I want to be able to get the values of these buttons and assign them into an array. Here is my code:
var myArray = [];
$("#buttonID").each(function(){
myArray.push($(this).attr("value"));
});
This works, however only takes the value from the first button, and then ignores the rest, despite them all have the same ID. Have I done something wrong with my .each() ?
Once I have solved that, I would like to then modify the above to only add values of those buttons with ".active" classes on them. i.e a user has selected them.

Your selector represents an ID hence the #this why it picks only one because ID's are supposed to be unique, you need to pick them by class name like .className after assigning this class name to all of your buttons
have a loonk at this http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Let's say you decided to use a common class for your buttons instead of an ID. Example:
<button class="my-class".......
There's a wonderful jQuery method that would put the values of all the button's with this class in an array like so:
var myArray = $('.my-class').map(function() {
return this.value;
})
.get();

Add active class to menu "parent" item if URL has a a /directory/ listing

trying to add a CSS class to a a parent item when the URL contains a directory path.
For instance if my url is
example.com/directory/about.html
I want to add a CSS class an item in my top navigation if it contains /directory/ in it.
so in this case, example.com/directory/overview.html would get a CSS class "active-parent"
which would be .main-nav li a.active-parent
(mind you I am already using jquery to check for teh URL and make that page active, but its when its a sub page of a section, the parent is not highlighted)
I thought I could usde the :contains() Selector but I dont know how to apply it to a URL

jQuery selectors can't be used on an url. You must parse the url and check the content be yourself.
if (window.location.href.indexOf('/directory/') != -1) {
// Add a css class to a html element
}
You may want to do a more generic way be using the split function :
window.location.pathname.split('/').forEach(function(directory) {
if (directory == 'directory') {
// Add a css class to a html element
}
});

Based on limited information, I'd suggest:
$('a').filter(
function(){
return this.href.match(/(\/\w+\/)/);
}).parent().addClass('parent');
This assumes the class is added if the href contains any directory, not simply a specific directory named 'directory'.
References:
match().
Regular expressions in JavaScript.

I f I understand you correctly, you want to filter through a group of urls and then, based on text within the href, you want to manipulate data. In that case, use the .filter() function like so:
$("a").filter(function(i) { return $(this).attr("href").indexOf("document") > -1; })
This Grabs ALL A tag elements, filters them using the function inside to determine if the href has "document" in it or not. Then simply use the .each() function to do whatever, like so:
$("a")
.filter(function(i) { return this.href.indexOf("document") > -1; })
.each(function(i) {
$(this).parent().addClass("some-class-name");
});
See jsFiddle Example
If you need more understanding, just comment.

Remove all classes except one

Well, I know that with some jQuery actions, we can add a lot of classes to a particular div:
<div class="cleanstate"></div>
Let's say that with some clicks and other things, the div gets a lot of classes
<div class="cleanstate bgred paddingleft allcaptions ..."></div>
So, how I can remove all the classes except one? The only idea I have come up is with this:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put an ID attribute with the base CSS properties so they don't get deleted, what also improves performance, but i just want to know another solution to get rid of all except ".cleanstate"
I'm asking this because, in the real script, the div suffers various changes of classes.

Instead of doing it in 2 steps, you could just reset the entire value at once with attr by overwriting all of the class values with the class you want:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Sample: http://jsfiddle.net/jtmKK/1/

Use attr to directly set the class attribute to the specific value you want:
$('#container div.cleanstate').attr('class','cleanstate');

With plain old JavaScript, not JQuery:
document.getElementById("container").className = "cleanstate";

Sometimes you need to keep some of the classes due to CSS animation, because as soon as you remove all classes, animation may not work. Instead, you can keep some classes and remove the rest like this:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

regarding to robs answer and for and for the sake of completeness you can also use querySelector with vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";

What if if you want to keep one or more than one classes and want classes except these. These solution would not work where you don't want to remove all classes add that perticular class again.
Using attr and removeClass() resets all classes in first instance and then attach that perticular class again. If you using some animation on classes which are being reset again, it will fail.
If you want to simply remove all classes except some class then this is for you.
My solution is for: removeAllExceptThese
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
$.fn.removeClassesExceptThese = function(classList) {
/* pass mutliple class name in array like ["first", "second"] */
var $elem = $(this);
if($elem.length > 0) {
var existingClassList = $elem.attr("class").split(' ');
var classListToRemove = existingClassList.diff(classList);
$elem
.removeClass(classListToRemove.join(" "))
.addClass(classList.join(" "));
}
return $elem;
};
This will not reset all classes, it will remove only necessary.
I needed it in my project where I needed to remove only not matching classes.
You can use it $(".third").removeClassesExceptThese(["first", "second"]);