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
Related
I have a string with some DOM HTML saved inside, among which a div with static id="myId", which has no innerHTML but has dynamic width value set.
Example:
myString = "<div class="class">blahblah</div><div id="myId" width="42.584px"></div>"
How can I create a new identical string cutting off the whole <div id="myId" width="42.584px"></div>? The problem is that width="" value changes all the time so I can't do a .replace.
the HTML saved in the string, looks something like this (and number of divs can vary, but obviously only one has the myId div mentioned):
<div id="firstId"></div>
<div id="div0" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 0</span>
<span class="" id="fasdf"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
<div id="myId" class="" style="width: 59.5312px;"></div>
</div>
<div id="div1" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 1</span>
<span class="" id="eyuacv"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
</div>
<div contenteditable="true" id="lastId" style="height:18px;" onkeydown="myFunction()"></div>
You could create a jQuery element from that string, remove the #myID div then grab the new HTML:
var myString = `
<div id="firstId"></div>
<div id="div0" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 0</span>
<span class="" id="fasdf"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
<div id="myId" class="" style="width: 59.5312px;"></div>
</div>
<div id="div1" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 1</span>
<span class="" id="eyuacv"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
</div>
<div contenteditable="true" id="lastId" style="height:18px;" onkeydown="myFunction()"></div>`;
var myNewString = $('<div>').append(myString).find('#myId').remove().end().html();
console.log(myNewString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Maybe you can try do build that string in another way,like:
var myArray = [
"<div class="class">blahblah</div>",
"<div id="myId" width="42.584px"></div>"
]
And you can build the string with:
var myString = myArray.join("")
And make the changes on myArray[0...n]. So removing a single array position its like removing a div.
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>
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");
}
When the user hovers over the link with the class "thumb" the closest link with the class "title" should have the class "media-link-hover" applied to it. How can this be done?
I tried closest() and also this but nothing seems to be working:
$('a.thumb').hover(function() {
$(this)
.prevAll('.block')
.find('a.title')
.addClass('media-link-hover');
}, function() {
$(this)
.prevAll('.block')
.find('a.title')
.removeClass('media-link-hover');
});
HTML:
<article class="block">
<div class="inner-left">
<a class="thumb" title="" href="">
<img width="198" height="111" alt="" src="" />
<span class="media-overlay">video</span>
</a>
</div>
<div class="inner-right">
<a class="title" title="" href="">Hello</a>
<div class="description">
<p>Hi there</p>
<a class="teaser" href="">Hola</a>
</div>
<div class="media-stats">
<span class="finder">Found by <strong>Me</strong> 1 month ago</span>
</div>
</div>
</article>
Works with closest('.block')
http://jsfiddle.net/yBwSN/
Try with parents() and also you can reduce the code by using toggleClass().
Demo http://jsfiddle.net/elclanrs/Ce8fu/
$('a.thumb').hover(function() {
$(this)
.parents('.block')
.find('a.title')
.toggleClass('media-link-hover');
});