We Keep Coding

jQuery/Cheerio: How to recursively get certain elements by name/tag?

I'm trying to make a bot that scrapes links from a website. I am running in to some weird error that I cannot figure out. My guess is that the second if statement is failing to check and also my unfamiliarity with jQuery is not helping.
Error:
element.each is not a function
const $ = load(html);
const html = $("#id");
const temp = [];
function recursive(element) {
if (element.name === "a") {
temp.push(element);
}
if (!element || element.children().length > 0 === false) {
return "DID NOT FIND IT OR NO CHILDREN FOUND";
}
return element.each((_, item) => recursive(item));
}
recursive(html);
return temp;

I've tried to create simple snippet demonstrating what you seem to accomplished with JQuery.
Firstly, your check if for the Tag of an element doesn't seemed to be working properly. I had to use the .prop('tagName') to get the Tag of the element. And it gets returned in all capital letters.
Your second IF-Statement should work fine, but the .each() Method didnt work as expected. You want to iterate through all children and start the recursive function. And the way you provided the child element didnt end up working.
The .each() Method want a callback function which provides two parameters as you have uses correctly. but the Item is a normal HTML Node and you had to select it with the JQuery Constant $ like $(item). This gives you the desired JQuery Element you can work with.
const html = $("#test");
const temp = [];
function recursive(element) {
if (element.prop("tagName") === "A") {
temp.push(element);
}
if (!element || element.children().length > 0 === false) {
return "DID NOT FIND IT OR NO CHILDREN FOUND";
}
return element.children().each((i, item) => recursive($(item)));
}
recursive(html);
console.log(temp)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<div class="headings">
<h1>Heading</h1>
Main Page
</div>
<div class="test-cls">
<button>Hello</button>
Test Page
</div>
</div>

click all buttons on page except when parent has a specific class

I want to click all buttons on a page that have the attribute data-capture='noiseClicked'
This is my code so far:
javascript: (function() {
var followButtons = $("li.js-profile-card button[data-capture='noiseClicked']");
var index = followButtons.length - 1;
follow();
function follow() {
if (index >= 0) {
$(followButtons[index--]).click();
setTimeout(follow, 1);
}
}
})();
However I want to exclude buttons that have a parent of li.noise--active or li.friend--active
So the following would be clicked:
<li class="js-profile-card noise--active"><button data-capture="noiseClicked" type="button"></button></li>
but the following would not be clicked...
<li class="js-profile-card noise--active"><button data-capture="noiseClicked" type="button"></button></li>
or
<li class="js-profile-card friend--active"><button data-capture="noiseClicked" type="button"></button></li>
I thought that jquery's not selector would be helpful here, but I'm not sure how to use it to exclude a parent element with a specific attribute and I don't know how to exclude two different attributes (noise--active and friend--active)
Thanks.

You can use parent & hasClass methods for this:
var indexToSet = index--;
if( !$(followButtons[indexToSet]).parent().hasClass( 'noise--active' ) && !$(followButtons[indexToSet]).parent().hasClass( 'friend--active' )) {
$(followButtons[indexToSet]).click();
}
EDIT:
to travel up in the node list better to use closest() method:
var indexToSet = index--;
if( !$(followButtons[indexToSet]).closest( 'noise--active' ).length && !$(followButtons[indexToSet]).closest( 'friend--active' ).length ) {
$(followButtons[indexToSet]).click();
}

:not selector might come handy:
var followButtons = $("li.js-profile-card:not(.noise--active,.friend--active) button[data-capture='noiseClicked']");

Remember li active state when loading to different pages?

I have my code below:
<ul id="profileList" class="nav nav-list">
<li>修改个人签名档</li>
<li>修改个人居住地</li>
<li>修改个人学校专业</li>
</ul>
Also here's the JS code:
<script type="text/javascript">
$(document).ready(function() {
// store url for current page as global variable
current_page = document.location.href
// apply selected states depending on current page
if (current_page.index(/signature/)) {
$("ul#profileList li:eq(0)").addClass('active');
} else if (current_page.match(/location/)) {
$("ul#profileList li:eq(1)").addClass('active');
} else if (current_page.match(/education/)) {
$("ul#profileList li:eq(2)").addClass('active');
} else { // don't mark any nav links as selected
$("ul#profileList li").removeClass('active');
};
});
</script>
When I click the second and third li item, they work well. But when I click the first item,
the item is not becoming active. What's the wrong and why?

In
if (current_page.index(/signature/)) {
Change to
if (current_page.match(/signature/)) {

As far as I know, String.prototype.index doesn't exist. Perhaps you wanted to use the indexOf method.
if (current_page.indexOf('signature') !== -1) {}
Also, do not use the String.prototype.match function when you just want to know if there's a match or not, use the RegExp.prototype.test function.
if (/education/.test('education')) { /*matches*/ }
However in your case, you could use the match method and instead of discarding the match, use it at your advantage:
var sections = ['signature', 'location', 'education'],
match = document.location.href.match(new RegExp(sections.join('|'), 'i')),
selectorSuffix = match? ':eq(' + sections.indexOf(match[0].toLowerCase()) + ')' : '';
$('ul#profileList li' + selectorSuffix)[(match? 'add' : 'remove') + 'Class']('active');

jquery get certain class name of element which has several classes assigned

I need to read elements class name. I have elements like this:
<article class="active clrone moreclass">Article x</article>
<article class="active clrtwo moreclass">Article y</article>
<article class="active clrthree moreclass moreclass">Article z</article>
<article class="active clrone moreclass">Article xyza</article>
I need to parse out class name that starts with clr. So if second element was clicked then I would need to get clrtwo className.

You can use a regular expression match on the class name of the clicked item to find the class that begins with "clr" like this:
$("article").click(function() {
var matches = this.className.match(/\bclr[^\s]+\b/);
if (matches) {
// matches[0] is clrone or clrtwo, etc...
}
});

Here is solution for you:
$('article').click(function () {
var className = this.className.split(' ');
for (var i = 0; i < className.length; i+=1) {
if (className[i].indexOf('clr') >= 0) {
alert(className[i]);
}
}
});
http://jsfiddle.net/vJfT7/
There's no matter how you're going to order the different classes. The code will alert you a class name only of there's 'clr' as a substring in it.
Best regards.

If you don't need to find elements based on these classes (e.g. doing $('.clrtwo')) it would be nicer to store the data as a data-clr attribute. This is standards-compliant from HTML5, and is supported by jQuery using the .data() function.
In this instance, I would modify your HTML in this way:
<article class="active moreclass" data-clr="one">Article x</article>
<article class="active moreclass" data-clr="two">Article y</article>
<article class="active moreclass moreclass" data-clr="three">Article z</article>
<article class="active moreclass" data-clr="one">Article xyza</article>
I would then use Javascript like this:
$('article.active').click(function() {
console.log($(this).data('clr'));
});
jsFiddle example

If it is always the second class name which is of interest you can do this:
$("article").click(function () {
// split on the space and output the second element
// in the resulting array
console.log($(this)[0].className.split(" ")[1]);
});
http://jsfiddle.net/karim79/Z3qhW/

<script type="text/javascript">
jQuery(document).ready(function(){
$("article").click(function(){
alert($(this).attr('class').match(/\bclr[^\s]+\b/)[0]);
});
});
</script>

This should jquery script should do what you asked (tested on jsfiddle):
$(document).ready(function () {
function getClrClass(elem) {
var classes = elem.getAttribute('class').split(' ');
var i = 0;
var cssClass = '';
for (i = 0; i < classes.length; i += 1) {
if (classes[i].indexOf('clr') === 0) {
cssClass = classes[i];
i = classes.length; //exit for loop
}
}
return cssClass;
};
$('article').click(function (e) {
var cssClass = getClrClass($(this)[0]);
alert(cssClass);
e.preventDefault();
return false;
});
});
Hope this helps.
Pete

Use an attribute selector to get those that have class names that contain clr.
From there:
extract the class name (string functions)
analyze the position
determine the next element
The latter two might be best served by a translation array if you only had a few classes.
UPDATE
I agree with lonesomeday, you'd be far better off using data-* attribute to handle such logic. Using CSS as JavaScript hooks is a thing of the past.

http://jsfiddle.net/4KwWn/
$('article[class*=clr]').click(function() {
var token = $(this).attr('class'),
position = token.indexOf('clr');
token = token.substring(position, token.indexOf(' ', position));
alert(token);
});

Check link by jQuery

There is a block of links,
<div class="links">
<a href="http://google.com">
<a href="http://bing.com">
<a href="http://example.com/section2/">
</div>
They are all placed in the html of http://example.com/.
How do I check each one, is it a link to currently opened site?
Script should give true to http://example.com/anything/else/in/the/url/ and false to all others site.

check out my jQuery plugin $.urlParser at GitHub: https://github.com/Dyvor/jquery/tree/master/plugins/urlParser
You could try the following code:
var current_host = $.urlParser(window.location.toString()).host;
$('div.links a').each(function() {
if ( current_host == $.urlParser($(this).attr('href')).host ) {
// the hosts matched ... place your code here
}
});

Give your DIV an ID to make it a bit easier:
<div id="links">
and then this script will do what you want:
var links = document.getElementById('links').getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('http://mysite.com/') === 0) {
// Yes, this link belongs to your site
// do something
} else {
// do something else
}
}

this should do it
$("a").each(function(){
return $(this).attr("href").indexOf("http://mysite.com")==0;
});
Another way
$("a[href^='http://mysite.com/']")
will only give you the links you need