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>
Related
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>
This is the current code:
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>
I need to fetch the href attr of a tag within span tag and insert it to the whole inner-wrap element. Something like this:
<div class="main-wrap">
<div class="inner-wrap">
<a href="1">
some content here
<span>
test1
</span>
</a>
</div>
<div class="inner-wrap">
<a href="2">
some content here
<span>
test2
</span>
</a>
</div>
<div class="inner-wrap">
<a href="3">
some content here
<span>
test3
</span>
</div>
</a>
</div>
I can fetch the href tag of each a tag but I'm confuse as to how to append it to the each inner-wrap divs. This is what I've done by far:
$('.inner-wrap').each(function(){
$this = $(this);
$fetchLink = $this.children('span').find('a').attr('href');
console.log($fetchLink);
});
I know this is really very simple but I can't get to work around. Can someone please help?
here's working jsfiddle
You can use wrapInner(), However, You should not nest anchor inside another anchor element.
$('.inner-wrap').wrapInner(function(i) {
var $this = $(this);
var a = $this.children('span').find('a');
var href = a.attr('href');
//Remove inner anchor
a.replaceWith(a.text());
return "<a href='" + href + "'></a>";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>
This isn't going to work very well because you can't have a link within a link, but the general idea is to replace the $.html() of .inner-wrap with it's $.html() wrapped in an a tag with $fetchLink as the href attribute.
$('.inner-wrap').each(function() {
$this = $(this);
$fetchLink = $this.children('span').find('a').attr('href');
$this.html(''+$this.html()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
<div class="inner-wrap">
some content here
<span>
test1
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test2
</span>
</div>
<div class="inner-wrap">
some content here
<span>
test3
</span>
</div>
</div>
I have following HTML:
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagNone"></span>
</span>
</span>
</a>
</article>
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagRed"></span>
</span>
</span>
</a>
</article>
And now I would like to change the background-color from the span with class 'articleTitle' to red, if the class 'flagNone' is set in this article. It should only change in this article not in the following one.
I tried this:
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
}
});
but it doesn't work. Any ideas?
Hello Please check this Demo
$(document).ready(function() {
if ($('.articleFlag.flagNone').length>0) {
$('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
}
});
I think it will help you
Use jQuery's :has() selector (demo)
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.row:has(.flagNone) .articleTitle').css("background", "red");
}
});
Closest traverse up the dom tree, that is the reason your selector doesn't work
try below js code
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
}
I am trying to copy contents of one span to another span on anchor click even.
It works fine if i remove the wrapper title div's example jsFiddle
when i wrap them inside div it doesnt work anymore i tried different thing so far i am not able to find right property or function to use.
This one needs fix jsFiddle
<div style="float:left; width=800px;" id="video_container">
<iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
</div>
<span class="active-video-title">Title</span>
<span class="active-video-date">Date</span>
<div class="row">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 1</span>
<div class="title-wrapper">
<span class="title">Title of the Video 1</span>
<span class="date">Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 2</span>
<div class="title-wrapper">
<span class="title">Title of the Video 2</span>
<span class="date">Date 2</span>
</div>
</a>
</div>
<div class="row2">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 1</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 1</span>
<span class="featured-date">featured Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 2</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 2</span>
<span class="featured-date">featured Date 2</span>
</div>
</a>
</div>
.children() will get the children of each element in the set of matched elements, optionally filtered by a selector.
Use find() method which will get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.:
$(document).ready(function () {
$('.play-youtube').click(function (e) {
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="438" height="250" src="http://www.youtube.com/embed/' + URL + '" frameborder="0" allowfullscreen="1" ></iframe>';
$(".active-video-title").html($(this).find(".title").html());
$(".active-video-date").html($(this).find(".date").html());
$(".active-video-title").html($(this).find(".featured-title").html());
$(".active-video-date").html($(this).find(".featured-date").html());
return false;
});
});
DEMO FIDDLE
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