I want to get all the span data attribute inside the p element so that I can compare the values/text of my hidden p element
<div>
<ol class="edit-list">
<li class="edit">
<p class="hidden answer" data-answer="He loves fish tacos">He loves fish tacos</p>
<p>
<span data-original="Brad">He</span>
<span data-original="loves">loves</span>
<span data-original="fish">fish</span>
<span data-original="tactos">tactos</span>
</p>
</li>
<li class="edit">
<p class="hidden answer" data-answer="I love learning!">I love learning!</p>
<p>
<span data-original="I">I</span>
<span data-original="love">love</span>
<span data-original="learning!">learning!</span>
</p>
</li>
<li class="edit">
<p class="hidden answer" data-answer="I ate dinner">I ate dinner</p>
<p>
<span data-original="I">I</span>
<span data-original="ate">ate</span>
<span data-original="dinner">dinner</span>
</p>
</li>
</ol>
<button id="validate" >Validate</button>
</div>
Here is my JavaScript code.
<script type="text/javascript">
$(function(){
var mismatch = false;
$('ol.edit-list li').each(function(){
var p_answer = $(this).find('p').attr('data-answer');
var c_annswer = $(this).find('p').has('span').children().attr('data-original'); // I canno get all the span inside the p;
if(p_answer !== c_answer){
mismatch = true;
break;
}
}
});
</script>
Related
Very new to JavaScript so wondering if this is even possible. I was told by a friend that React could do what I am looking for through routes. But I don't know React yet, and don't plan on learning it for a while.
I am currently working on a website. On the Index page there is a "services provided" section with a little info about the four services provided. For each service there is a read more tag. On the services page I have cards that are set to show text with basic JavaScript when a button is clicked in their individual service cards.
I am wondering if it is possible to set up an event listener on click when the tag on the index page is clicked so that a "show-text" class is added to the necessary service card. So when a user clicks on "read more" it takes them to the services page with the service they wanted to read more about, already open.
index.html
<h2> Our services include:</h2>
<ul>
<li class="service-provided">
<h3>HR office hours:</h3>
<p>
<a class="hr-office-hours read-more" href="services2.html">Read more...
</a>
</p>
</li>
<li class="service-provided">
<h3>Coaching for transformation:</h3>
<p>
<a class="coaching read-more" href="services2.html">Read more...
</a>
</p>
</li>
<li class="service-provided">
<h3>Training and supporting supervisors:</h3>
<p>
<a class=" supervisors read-more" href="services2.html">Read more...
</a>
</p>
</li>
<li class="service-provided">
<h3>Building human resources systems and practices that reflect your organization’s values:</h3>
<p>
<a class="org-values read-more" href="services2.html">Read more...</a>
</p>
</li>
</ul>
Services HTML-
<div class="service-card hr-office-hours card" id="HROH">
<div class="service-title">
<h2>HR office hours</h2>
<button type = "button" class = "service-btn">
<span class = "plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class = "minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="service-text">
<h3></h3>
<p></p>
</div>
</div>
<div class="class="service-card coaching card" id="CFT">
<div class="service-title">
<h2>Coaching for transformation</h2>
<button type = "button" class = "service-btn">
<span class = "plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class = "minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="service-text">
<h3></h3>
<p></p>
</div>
</div>
<div class="service-card supervisors card" id="TS">
<div class="service-title">
<h2>Training and supporting supervisors</h2>
<button type = "button" class = "service-btn">
<span class = "plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class = "minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="service-text">
<h3></h3>
<p></p>
</div>
</div>
<div class="class="service-card org-values card" id="BHRS">
<div class="service-title">
<h2>Building human resources systems and practices that reflect your organization’s values</h2>
<button type = "button" class = "service-btn">
<span class = "plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class = "minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="service-text">
<h3></h3>
<p></p>
</div>
</div>
Javascript
const service = document.querySelectorAll('.service-provided');
const cards = document.querySelectorAll('.service-card');
service.forEach(function(readmore){
const link = readmore.querySelector('.read-more');
link.addEventListener('click', function(){
cards.forEach(function(card){
if (link.classList.contains('hr-office-hours') && cards.classList.contains('hr-office-hours')){
card.classList.add('show-text')
} else if (link.classList.contains('coaching') && cards.classList.contains('coaching')){
card.classList.add('show-text')
} else if (link.classList.contains('supervisors') && cards.classList.contains('supervisors')){
card.classList.add('show-text')
} else if (link.classList.contains('org-values') && cards.classList.contains('org-values')){
card.classList.add('show-text')
}
})
})
})
I have many numbers of divisions in my HTML code. There are no ids or classes for any of the divs. This is my code
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
I want to get the text of innermost span inside divs, which have two nested spans and the innermost span should have a title such as
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
and also is it possible to remove such divs? Are there any functions in jquery to do it? thanks in advance
Since there's no other text inside, you can simply use .textContent on the outer divs and trim the result:
const texts = [];
document.querySelectorAll('div').forEach(div => {
if (
div.children[0].tagName !== 'SPAN' ||
div.children[0].children[0].tagName !== 'SPAN' ||
!div.children[0].children[0].hasAttribute('title')
){
return;
}
texts.push(div.textContent.trim());
// if you want to remove the divs afterwards:
div.remove();
});
console.log(texts);
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<span>
some span without a title
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
You can target these elements with $('div > span > span'), and loop over them with .each().
You can get the text content with the .text() method, and delete the elements with .remove().
This can be seen in the following:
$('div > span > span').each(function() {
console.log($(this).text());
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>
link
</span>
</div>
<div>
<span>
<span title="title 1">Some text written here</span>
</span>
</div>
<div>
<span>
<span title="title 2">Some other text written here</span>
</span>
</div>
<div>
<span>
some link
</span>
</div>
No need for jQuery for this one and selected answer does not check for title attribute and does not remove he div (it removes the span):
const data = Array.from(
document.querySelectorAll("#content>div>span>span[title]")
).map(
span=>[span.parentElement.parentElement,span.textContent.trim()]
);
console.log(
"text content of element(s):",
JSON.stringify(
data.map(([x,text])=>text)
)
);
setTimeout(
()=>{
alert("before removing divs (check html)");
data.forEach(([div])=>div.remove());
},2000
)
<div id="content">
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
</div>
I'm scraping a website where it has the following HTML structure
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
I want to use jQuery to get the links from the divs to get something like this
{
"vol.1 ch.1" : "link/1",
"ch.2" : "link/2"
}
As all the items i want has the class ch sts i wanted to get them with the selector, and trying to use each() but didn't work as it shows nodes...
Here's what how i'm trying:
$d('.ch').map(function(){
console.log('This: href',$(this).attr("href"));
}).get();
It is simpler than you thought. Since you've mentioned that you only want to parse links with ch sts classes, I changed the selector.
var map = {};
$(".ch.sts").each(function() {
map[$(this).text()] = $(this).attr("href");
});
console.log(map);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
Get all the Elements with class name.
Get the text value and "href" attribute.
x = document.getElementsByClassName("ch sts");
for(i =0; i<x.length; i++) {
console.log(x[i].text +" "+ x[i].getAttribute("href"));
}
I am trying to get product name in alert box when either image or link is clicked on product page. But there is also one buy now button available which is also currently giving the popup alert if it is clicked. I want to exclude it using jquery. Here is what I am going
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".item").click(function (event) {
var href = $('a', this).attr("href");
var target = $('a', this).attr("target");
var text = $(this).find('.product-name').text();
event.preventDefault();
alert(text);
setTimeout(function () {
window.open(href, (!target ? "_self" : target));
}, 300);
});
});
</script>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,-</span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,- </span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
http://jsfiddle.net/585BC/
Please advise.
Put this at the top of your callback:
if ($(event.target).hasClass("btn-cart") || $(event.target).parents(".btn-cart").length !== 0) {
return;
}
Now if the "event.target" (= where the click occured) has the class "btn-cart" or is a child of this "btn-cart", then the execution of your callback returns.
See updated fiddle: http://jsfiddle.net/585BC/2/
Just exit the event handler if you click the button:
if(($(event.target).is('.button.btn-cart')) return;
// rest of your code goes here
How do i add a text to all 5 spans that share the same id.
the html goes:
<div class="body">
<form>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
</form>
</div>
The js:
function check_aff_payment(elem){
$(elem).find('#test').each(function(){
$("#test").text("*");
});
}
ID's on a HTML page are required to be unique.
Try using class instead
<div class="body">
<form>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
</form>
</div>
function check_aff_payment(elem){
$(elem).find('.test').each(function(){
$(this).text("*");
});
}
Check Fiddle