We Keep Coding

Having trouble working with SelectWoo instances of Select2 within WooCommerce

I am using Select2 within WooCommerce in some of my own custom areas and I am targeting it with some code to add and removes certain classes and it's working fine except for the SelectWoo instances used by WooCommerce themselves do not add the class using el.addClass('has-selection'); in the example provided.
Example code:
(function($) {
$('select').each(function(e) {
handleSelectSelections($(this));
});
})( jQuery );
function handleSelectSelections(select) {
var el = (select.next('.select2').length) ? jQuery(select.data('select2').$container) : select;
if (select.val() !== "" && select.val() !== null) {
el.addClass('has-selection');
} else {
el.removeClass('has-selection');
}
}
Everything works fine, except when it gets to the actual part where it adds the class it doesn't work - no class is added.
Am I missing something here?

May be
if (select.val() !== "" && select.val() !== null) {
**el.className += 'has-selection';**
} else {
el.removeClass('has-selection');
}

JQuery selector for domain list

I have a function in my code that I need to modify links in my page, it looks something like this:
$('a').each(function(){
// code here related to HREF attr
});
$('form').each(function(){
// Code relate to the TARGET attr
});
I need to apply this function on all the links and targets of forms pointing to some specific domains. Let's say I have a list like this one: www.example.com,www.domain.com,www.anotherdomain.com
How can I modify the selector in a way it could apply it only to links and form pionting to the domains in the list?

You can use .filter:
var $exampleComLinks = $('a').filter(function() {
return this.href.indexOf('https://example.com') == 0
|| this.href.indexOf('https://example2.com') == 0
|| this.href.indexOf('https://example3.com') == 0;
});
Or simple if statement:
$('a').each(function() {
if (this.href.indexOf('https://example.com') == 0
|| this.href.indexOf('https://example2.com') == 0
|| this.href.indexOf('https://example3.com') == 0) {
console.log('do something this $(this)');
}
});
Using #Praveen Kumar's domainList approach:
var domainsList = ["www.example.com", "www.domain.com", "www.anotherdomain.com"];
$('a').each(function () {
if (domainsList.indexOf($(this).attr("href").replace(/https?:\/\/([^\/]*).*/gi, "$1")) > -1)
// Do it.
});
$('form').each(function () {
// Code relate to the TARGET attr
if (domainsList.indexOf($(this).attr("href").replace(/https?:\/\/([^\/]*).*/gi, "$1")) > -1)
// Do it.
});

If the targets are site url I suggest to add http:// or https:// and then (elsewhere you have to remove http:// from attr("target") or href when comparing.):
var domains="http://www.example.com,http://www.domain.com,http://www.anotherdomain.com";
$('a').each(function(){
if (domains.indexOf($(this).attr("href")) > -1)
});
$('form').each(function(){
if (domains.indexOf($(this).attr("target")) > -1)
});

You can use new RegExp() with parameter array list joined with separator "|", RegExp.prototype.test()
var list = ["www.example.com","www.domain.com","www.anotherdomain.com"];
$("a, form").each(function(i, el) {
if (new RegExp(list.join("|")).test(this.href || this.target)) {
// do stuff
}
})
jsfiddle https://jsfiddle.net/xkjpxd6L/

How to check multiple CSS properties in a jQuery script

I have the below script
$('#copyright, #credit, #doom a').each(function () {
if ($(this).css('font-size') != '15px') {
document.location.href = "http://www.example.com";
}
});
It checks all these IDs' CSS properties for font-size 15px; if it's not 15px then the page will be redirect to example.com.
I want to know how can I add multiple css properties in that script. I want to include position:relative;height:auto;background:#000;.
It may look like this: (this is only example not the working script )
$('#copyright, #credit, #doom a').each(function () {
if
position:relative;height:auto;background:#000
{ do nothing }
else
{
document.location.href = "http://www.example.com";
}
});

Perhaps something like this:
For the sake of modularity and clarity you can separate this process into its own function:
function valid(element){
return (element.css('font-size') != '15px' &&
(element.css('position') != 'relative' &&
(element.css('height') != 'auto' &&
(element.css('background') != '#000');
}
And then use it in your code:
if (valid($(this)){
document.location.href = "http://www.example.com";
}

jQuery Input Colour Changes Not functioning correctly

I'm trying to get my input fields (associated by class) to change colour when they have content.
This is working, but removing the class isn't activating properly, and I'm unsure why. If I enter content into the first, then second input, delete the content from the first, the class is removed, however if I delete the content from the second before the first, the background remains blue.
I can't use the textboxes Id's as they're already in use.
JS Code:
$('.checkFiller').on('change', function () {
if ($('.checkFiller').length > 0) {
$(this).addClass('allFiller');
}
if ($('.checkFiller').val() == '' || $('.checkFiller').val() == 0 || $('.checkFiller').val() == null) {
$(this).removeClass('allFiller');
}
});
Here is a jsfiddle to demo my frustration - what am I doing wrong?
https://jsfiddle.net/qwgj77tm/1/

You need to use this to get the one you are editing use .hasClass() and .length to acheive this
$('.checkFiller').on('change', function () {
if($(this).val().length==0){
$(this).removeClass('allFiller');
}else $(this).addClass('allFiller');
});
.allFiller {
background-color: #333366;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkFiller">
<input class="checkFiller">
<input class="checkFiller">

You should change your references from $('.checkFiller') to $(this) in the on:
$('.checkFiller').on('change', function () {
if ($(this).length > 0) {
$(this).addClass('allFiller');
}
if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) {
$(this).removeClass('allFiller');
}
});
As is, you're checking the first input with the class, rather the one that has changed.

jQuery separate dblclick events inside and outside of a div element

I'm developing a local site for content creation, and I'd like to use javascript's double click functionality.
I'd like to rotate through full screen background images when the user double clicks outside of the divs with names/ids bigwrapper or bigwrapper2. When the user clicks #bigwrapper or #bigwrapper2, I'd like it to .toggle(); each one to hide/show one or the other.
Here's my updated code (thanks lordvlad):
$(function() {
$( "#bigwrapper" ).draggable();
$( "#bigwrapper2" ).draggable();
var SacramentoBG = ['nightcap.jpg','Tower_Bridge_Sacramento_edit.jpg'],
counter =0;
$('html').dblclick(function (event) {
if (event.target.id != "bigwrapper" && event.target.id != "bigwrapper2") {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});
});
UPDATE: The solution below to add 'event' inside the function partially helped, as the backgrounds rotate properly, however the #bigwrappers aren't toggling as intended (the else condition). See: http://artfuladvection.com/project/NOAA/ndfdGraph/bloom.php Ideas?
Thanks!

that's because the dblclick function doesn't know about the event variable. try this
$('html').dblclick(function (event) {

The complete answer that worked for me was that I needed to stop excluding specific classnames/ids and instead exclude entire element tags. Alternatively, I could just use if (event.target.TagName == 'BODY') {}
$('body').dblclick(function (event) {
if (event.target.tagName != 'DIV' && event.target.tagName != 'IMG' && event.target.tagName != 'TABLE' && event.target.tagName != 'HR' && event.target.tagName != 'SMALL' ) {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});