my javascript knowledge is pretty poor. I'm trying to run a script with greasemonkey on http://www.twitch.tv/directory/all to remove certain kinds of streams from the list based on an image provided next to a shot of the stream(like picture of hearthstone, minecraft etc.). Here's the code:
//what you want to remove
var killIt=["http://static-cdn.jtvnw.net/ttv-boxart/Hearthstone%3A%20Heroes%20of%20Warcraft-138x190.jpg", "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-138x190.jpg", "http://static-cdn.jtvnw.net/ttv-boxart/Minecraft-138x190.jpg"];
var el = document.getElementsByClassName("boxart");
//runthrough elements killing certain ones
for (i = 0; i < el.length; i++) {
for (j = 0; j < killIt.length; i++) {
if (el[i].src == killIt[j]) {
var ely = el[i].parentNode;
ely.parentNode.removeChild(ely);
}
}
}
So i tried it on w3schools site and the code works fine, but when i try to actually run it in twitch.tv it does nothing(seemingly).
Am i missing something about parent nodes? Or greasemonkey?
The second for should be j++. Also you can use .indexOf to test if the URL is listed in the array to avoid a other for loop.
Related
Dont truly know how to convey my problem but each webpage within a database I'm scraping has variations within the Xpaths of the thing I want to collect. How can I effectively scrape webpages when their exact locations vary by a few places each page?
Using Python 3.6 and Selenium. I want to use CSS selectors because someone said they allow for 'scraping by adjacency' but frankly IDK how and no tutorials are really saying how to CSS select from adjacent variable
I have THIS javascript which DOES NOTHING when I run using driver.execute_js(///) *but does work when I manually put it in the webconsole *
let email = '';
let contacts = document.querySelectorAll('div.contact-section');
for (let i = 0; i < contacts.length; i++) {
if (contacts[i].getAttribute('automation-id') === 'contact-true-owner') {
ele = contacts[i]
}
}
let links = ele.querySelectorAll('address > a')
let last = links.length - 1;
email = links[last].innerText; here
Below code snippet, "for" loop is taking long time to load the data to select box, could any one help me ? even I am using Jquery 1.3.2 which is new to me.
here names.response.length is 120000 records.
function personNameChangedCallback(names){
if(names.response.length > 0){
var options = [];
for (var i = 0; i< names.response.length; i++) {
options.push('<option>'+ names.response[i] +'</option>');
}
jQuery('[id=personNameSelected]').append(options.join(''));
}
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
I've been trying to learn javascript by refactoring some Jquery examples in a book into javascript. In the following code I add a click listener to a tab and make it change to active when the user clicks on the tab.
var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");
for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
tabs[tabNumber].addEventListener("click", function (event) {
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[tabNumber].classList.add("active");
for (var i = 0; i < content.length; i++) {
content[i].innerHTML = "";
}
event.preventDefault();
});
}
This returns an undefined error when I run it. However, I tried replacing tabs[tabNumber].classList.add("active") with this.classList.add("active") and it worked.
Why doesn't the previous code work? As far as I can see they are referring to the same thing, and tabs[tabNumber] should work since at that point in the code it is tabs[0].
If use this, I think it's better and a more polished solution. If you still want to use tabNumber, it's probably evaluating to 3 in every click callback, because it's the number after the last iteration, and you don't have a tabs[3] position.
So, you just have to make a closure of the tabNumber variable.
I guess other answers told you why tabs[tabNumber] does not work (because it comes from the score of the for loop and so, is always equal to the greater value of tabNumber).
That's why I would recommend using a .forEach loop. Careful though because it doesn't work on arrays of DOM nodes produced by document.querySelectorAll(), but you can use:
// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))
Anyway, I made a simplified working demo of your code.
Note that I save the currently active tab in a variable, to prevent another for loop. You could also do:
document.querySelector('.active').classList.remove('active')
But I like to reduce the amount of DOM reading.
Good luck for your apprentissage, re-writing some jQuery code into Vanilla JS seems like a good method, and you might acquire a far better comprehension of JavaScript.
var tables= dragContainer.getElementsByTagName('table');
The array returned by this call doesn't have the rows array filled out every time. This works properly in Chrome and IE9, but not in IE11.
Is there a work around I can use? I tried doing the following but it doesn't appear to be working. I'm not quite a javascript expert to tell exactly why but I am going to keep digging for a bit.
I could just pull the rowNodeList and store it, but I want to override the tables[j].rows because there is a large amount of code expecting this sort of structure.
var tables= dragContainer.getElementsByTagName('table');
for (i = 0; i < tables.length; i++) {
var rowNodeList = tables[j].getElementsByTagName('tr');
tables[j].rows.length = 0; //clear array
for (k=0; k < rowNodeList.length; k++) {
tables[j].rows[k] = rowNodeList[k];
}
}
EDIT: I just realized since this code is FOSS, I can just link to it.
https://github.com/dbunic/REDIPS_drag/blob/master/redips-drag-source.js#L334
http://jsfiddle.net/y8Uju/25/
Over there is my fiddle and if you add stuff to the list sometimes and I mean sometimes when you refresh page bottom 1 item disappears....why is this?
You reuse the 'i' variable, without declaring in your bindName function. Therefor it skips every even item in the list. Just change
for (i = 0; i < inputNames.length; i++) {
into
for (var i = 0; i < inputNames.length; i++) {
PS. please post your code on StackOverflow, instead of just referring to a jsfiddle.