My expected result for the code below is .csr-area-3 .csr-video with added classes csr-animate csr-zoom-in, why does $(this) not work in this situation?
if ($(".csr-area-3 .csr-video").is(":in-viewport")) {
$(this).addClass('csr-animate csr-zoom-in');
}
Because the context is the caller function / event or maybe the global window context, use the same selector again in order to add the class:
if ($(".csr-area-3 .csr-video").is(":in-viewport")) {
$(".csr-area-3 .csr-video").addClass('csr-animate csr-zoom-in');
}
Edit from comments
Use a variable to store the results of the jquery lookup:
var csrvideo = $(".csr-area-3 .csr-video");
if (csrvideo.is(":in-viewport")) {
csrvideo.addClass('csr-animate csr-zoom-in');
}
Note: using filter as #saptal's answer will assure the class to be added to the element(s) within viewport in case multiple elements exist.
You need .filter(function), to get the matched element which are in-view port and then add class to then
$(".csr-area-3 .csr-video").filter(function() {
return $(this).is(":in-viewport");
}).addClass('csr-animate csr-zoom-in');
You could also use
$(".csr-area-3 .csr-video:in-viewport").addClass('csr-animate csr-zoom-in');
If you only use
$(this).someFunction();
this refers to the window object.
You need to do
$(".csr-area-3:in-viewport").addClass('csr-animate csr-zoom-in');
$(".csr-video:in-viewport").addClass('csr-animate csr-zoom-in');
(Depends on what you actually want)
Related
I am using WebDriverIO to try to access (ie. getText, getAttribute, click, etc) an element after creating a list of elements. I am easily able to implement this element if I am using the browser.element() method, but the moment I use browser.elements(), I cannot access the individual objects in the array. According to the WebDriverIO docs, I should be able to access them using the value property.
Here is my pseudo-code. I assumed that these two functions should return the same thing:
usingElement() {
return browser.element('.someCss');
}
usingElements() {
return browser.elements('.someCss').value[0];
}
When I try to use the first block of code, it works perfectly fine.. but
when I try to use the second block, it gives me an error saying usingElements.click is not a function or usingElements.getText is not a function, etc.
How can I isolate a single element object after using the browser.elements() method?
I guess you might need to use one of the below two ways:
Way 1:
var elmnts = browser.elements('.someCss');
var element = elmnts.value[0].ELEMENT;
browser.elementIdClick(element);
Way 2:
var element = $$('.someCss')[0];
element.click();
Thanks,
Naveen
Your index reference was placed in the wrong spot. Try:
var myElement = browser.elements('.someCss')[0];
myElement.click();
You don't need to reference the value property, as WebdriverIO is smart enough to infer that for you.
Amongst other things, I have read:
what-does-this-mean
you-must-remember-this
mythical-methods
but they haven't solved 'this' problem I'm having with a piece of JavaScript.
I have a Section object that gets passed some XML which it uses to populate the section. In the Section object I append a div which has a specified index. The resulting jQuery object is pushed into a sections Array. The following code is from the Section object code:
sections.push($('#section' + p_sectionIndex));
this.showSection = function() {
this.show();
}
this.hideSection = function() {
this.hide();
}
sections[sections.length-1].on('show', this.showSection.call(sections[sections.length-1]));
sections[sections.length-1].on('hide', this.hideSection.call(sections[sections.length-1]));
Elsewhere I call sections[index].trigger('hide'); and sections[index].trigger('show');
The first of the links I mentioned above seemed to suggest this in a function depends on HOW it's called and that you could pass a reference to this into the function by using call. I know the showSection and hideSection function ARE being triggered - I just can't get the this in those functions to refer to the jQuery objects in the sections Array.
I have tried multiple variations of the above (excluding the call, using $(this) in the functions, adding the showSection and hideSection functions to the jQuery object - amongst others) but I'm kind of out of ideas.
Any help much appreciated!
this in an event handler is the element node that the event was bound to. If you want a jQuery object wrapping that node, use $(this)
Demo: http://jsfiddle.net/b36M6/
This of course assumes you revert back to the correct way of passing a function to the event binding.
When you use .call(), you're invoking the function immediately.
Since you want this to refer to the element, bound, just pas the function itself.
sections[sections.length-1].on('show', this.showSection);
sections[sections.length-1].on('hide', this.hideSection);
Now this in the showSection and hideSection methods will refer to the sections[] member to which it was bound.
I assume "show" and "hide" are some sort of custom events.
I would like to replace some "this" in a script.
$(this).find('option').each(function() {
$(this).hide();
})
Is there a possibility to replace only the outer this, or only the "this" that are not inside a function block? My idea doesn't work ...
.replace(/([^{])\bthis\b([^}])/gm, $1replacement$2)
addendum: The first code is handled as a string, not as javascript!
I am search for a regexp to replace only the outer "this".
If I understand your issue correctly, you are wanting to refer to the $(this) variable from within your function, however that variable gets changed to the local scope of the function. So within the function, $(this) will refers to the item you are currently iterating over.
You'll want to cache the scope of the $(this) object before you enter your function.
var cached_this = $(this);
$(this).find('option').each(function() {
cached_this.hide();
})
Now you have access the value of the outer $(this) from within a different scope using the cached_this variable.
The way to distinguish "outer" from "inner" text is that for inner, the next curly bracket is a right one, which closes the block its in.
So, using a negative look ahead to exclude this within a block:
str = str.replace(/\bthis\b(?![^{]*\})/gs, replacement);
Also note the simplification of the replacement term, since the match is just the target text "this".
See a live demo of this regex working.
In that case this is an object. It's not a string that you can replace. You may assign another value, but such a replacement will not work.
If you want to replace only certain divs, simply change your jQuery selector to select those with a certain class, or child elements of a parent div, for example.
You can try to use call. Due to this function you can replace this object:
$(this).find('option').each(function() {
// here this === replacement
$(this).hide();
}.call(replacement))
If it's in a function, you can "replace" this by assigning a different variable to it when you call it.
var func = function() {
$(this).find('option').each(function() {
$(this).hide();
});
};
func.apply(annotherThis);
Given the following code, why does the selector property work in the first instance but not the second? Aren't they both jQuery objects?
<span class='tst'>span</span>
var tst = $('.tst');
console.log(tst.selector);
// prints '.tst'
$('.tst').each(function() { console.log(this.selector);});
// prints undefined
this, in the context of the .each() loop, is not a jQuery object, so the selector property is undefined.
You need to make it a jQuery object first: $(this).selector
However, it should be noted that the selector property will return an empty string while inside the .each() loop.
Edit
If you absolutely need the selector property within the .each(), one option would be to cache your selector:
var cached = $('.tst');
cached.each(function() {
console.log(cached.selector); // Will display ".tst"
});
this != $(this)
In your first case tst is a reference to the jQuery object, but in the second this is simply the corresponding DOM element.
Within an .each() loop the .selector property is not available, however. To access '.tst' you can do $(this).attr("class") (when you use a class selector) -- though if you already use it in the each you can just cache it in a variable before hand.
Note that this will return all of the classes for that elements, so you can parse it later if it has more than one.
The best workaround based on your exact description is this:
var $tst = $(".tst");
$tst.each(function() {
console.log($tst.selector); //prints .tst
});
However I can't see any reason why you really need to do this.
Working Demo http://jsfiddle.net/wA6Yv/ or http://jsfiddle.net/a3CYR/2/
this != $(this)
If you keen: jQuery: What's the difference between '$(this)' and 'this'?
code
var tst = $('.tst');
console.log(tst.selector);
// prints '.tst'
$('.tst').each(function() {
alert($(this).text());
});
// prints undefined
Probably misunderstanding something simple, but i can't seem to get this to work.
I want to: go trough each img element in "wrapper", and strip all html from the title attribute (with stripTags() from mootools more). I get the error:
"this.get is not a function"
here is the code:
$('wrapper').getElements('img').each(function() {
var oldAlt = this.get('title').stripTags();
this.setProperty('alt', oldAlt);
});
Thanks in advance
$('wrapper').getElements('img').each(function(el) {
var oldAlt = el.get('title').stripTags();
el.setProperty('alt', oldAlt);
});
this does not refer to the looping element -- the first argument to the .each callback function is element passed, the second is index (opposite to jquery where index is first).
The other option is to bind the this variable
$('wrapper').getElements('img').each(function() {
var oldAlt = this.get('title').stripTags();
this.setProperty('alt', oldAlt);
}).bind(this);
The extra .bind(this) basically means, in the scope inside the each function, the variable this is bound to whatever value is refers to outside. (like passing the variable into the scope). If you have need to access the normal this pointer as well, as the outside reference, you should go with an option such as #Chetan's answer