My HTML code looks like this:
<div class="menu">
<a class="menu-item" href="........."> TEXT</a>
<a class="menu-item" href="........."> TEXT</a>
<a class="menu-item" href="........."> TEXT</a>
<a class="menu-item" href="........."> TEXT</a>
</div>
I am using cheerio for scraping. I want to loop through the anchor tags and extract TEXT and href but am unable to achieve so.
Please someone guide me through this.
Here is one of the ways to extract 'href' and 'TEXT'
const $=cheerio.load(....response data....);
const listItems= $(".menu a");
listItems.each((idx, el)=>{
const Text= $(el).text();
const href= $(el).attr("href");
console.log("text"+ text+ " href" + href);
})
The line const listItems= $(".menu a"); is helping to identify the anchor tags in div and upon looping we can extract the data in the anchor usingconst Text= $(el).text(); and const href= $(el).attr("href");
This is working for me.
Related
My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?
HTML on page-1:
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
HTML on page-2:
<div id="offcanvas">
<a href="page-1.htm#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
jQuery:
$("#offcanvas a").click(function(){
$('.offcanvas').offcanvas('hide');
$("body").css('background-color', '#000000')
});
Many thanks in advance for your help.
B]
So I manage to find the solution, this works:
$("#offcanvas a").on("click", function() {
if (window.location.hash) {
$("body").css('background-color', 'black');
}
:)
please use below html structure
you have not define id on html structure
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
I have the following html code :
<aside id="side">
<a class="active" href="#!"> some text <a>
<a href="#!"> some text <a>
<p> active </p>
</aside>
I am looking for a regex that only finds the 'active' string that is inside <aside id="side"></aside> and also 'active' should be value of class and something like <p> active </p> should not be match.
I try to use :
<aside.*[\s\S\n]class="active".*</aside>
but I dont find any match.
Try this
/class="\w*\W*active\W*\w*"/
Example
The problem with your regex is that the . in .* does not catch newlines. A JavaScript regex has no modifier to have newlines included in ., but you can use [\s\S]* as a workaround. The workaround skips over all whitespace and non-whitespace.
Here is a working code snipped that demonstrates that:
var html1 =
'<aside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</aside>';
var html2 =
'<bside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</bside>';
var re = /<aside [\s\S]* class="active"[\s\S]*<\/aside>/;
console.log('test html1: ' + re.test(html1));
console.log('test html2: ' + re.test(html2));
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I have an application that uses bootstrap and JQuery. On the website page it displays some links. Based on a certain condition that I set in the JavaScript file, I want to strikethrough those links. On my HTML page, landing.html, I have this code for the links as follows:
<div class = "container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li><a target="_blank" href.bind="PreTestLink">PreTest Survey 1</a></li>
<li><a target="_blank" href.bind="PreTestLink2">PreTest Survey 2</a></li>
</div>
In my JavaScript file, landing.js, I have a constructor method with this field that I would like to use as the condition for setting the above links to be strikethrough-ed or not:
import {RouterConfiguration, Router} from 'aurelia-router';
var myApp;
export class Landing {
static inject() { return [Router]; }
constructor(router){
this.router = router;
myApp = this;
this.config = {}
this.surveyCode1 = "";
this.surveyCode2 = "";
this.surveyCompleted = false;
}
...
if(some condition){
this.surveyCompleted = true;
}
Now, I know that with JQuery, I can send a value from the html file (i.e perhaps typed in by the user into a textbox) over to the JavaScript file by inserting:
value.bind="username"
into the HTML tag. I also know that strikethrough in HTML can be done with a:
<del> tag
I'm just not sure how to connect this logic in reverse, to use my surveyCompleted conditional variable to set the tag within my HTML page.
You code seems like its using Aurelia. So i would recommend you use aurelia and not Jquery for this. So this should be quite easy as Aurelia supports conditional templates.
Official Docs. So what you can do something like this.
<div class="container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 1</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 1</del></a>
</li>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 2</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 2</del></a>
</li>
I dont know aurelia but i think this must do the trick for you. Let me know if you still face issues.
Hope this helps :)
I have the following code:
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
I tried this in different browsers and the inner-anchor drops out of the outer-anchor in every browser. So it gets rendered as this:
<a id="outer-anchor" href="/test">
text in anchor
</a>
<a id="inner-anchor" href="/test2" style="display:none"></a>
Does someone know why and how to fix this?
Thanks in advance
You can't house anchor tags inside anchor tags.
This would move the childNode out of the outer-anchor to be it's sibling after it, and then hide it nicely;
JSfiddle
HTML
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
</div>
JavaScript
var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;
inner.style.display = 'none';
inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);
Output
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">text in anchor</a>
<a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>
parent-placeholder div purely exists to show how to relate to the parent DOM-element where the anchors are in.