I'm trying to get all anchor title text inside children div's
My HTML
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>blah1 blah1</div>"></a>
<a title="<div>blah2 blah2</div>"></a>
<a title="<div>blah3 blah3</div>"></a>
<a title="<div>blah4 blah4</div>"></a>
</div>
</div>
</div>
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>some text 1</div>"></a>
<a title="<div>some text 2</div>"></a>
<a title="<div>some text 3</div>"></a>
<a title="<div>some text 4</div>"></a>
</div>
</div>
</div>
My jQuery code
function openList()
{
var getTitletxt = $(this).find('a').attr("title");
console.log(getTitletxt);
}
I'm getting undefined in my console.log. Basically i'm trying to fetch text inside title div.
Don't use inline event handlers. You can use on for binding events.
HTML:
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>blah1 blah1</div>">a</a>
<a title="<div>blah2 blah2</div>">b</a>
<a title="<div>blah3 blah3</div>">c</a>
<a title="<div>blah4 blah4</div>">d</a>
</div>
</div>
</div>
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>some text 1</div>">aa</a>
<a title="<div>some text 2</div>">bb</a>
<a title="<div>some text 3</div>">cc</a>
<a title="<div>some text 4</div>">dd</a>
</div>
</div>
</div>
Javascript:
$('.myClass').on('click', 'a', function() {
alert($(this).attr('title'));
});
Demo: http://jsfiddle.net/tusharj/zfboe9o1/
Pass current object using this, by default this is not available of you bind handler use javascript inline handler. Your title is also not valid, you problably need on text that is not enclosed in div.
Live Demo
<div onClick="openList(this);">
function openList(obj)
{
var getTitletxt = $(obj).find('a').attr("title");
console.log(getTitletxt );
}
Change
<a title="<div>some text 1</div>"</a>
To
<a title="some text 1"> anchor 1 </a>
For custom tooltip class you can make css class, I took it from answer here.
Live demo with tool tip custom style
a.ac[title]:hover:after
{
}
First close your Tag.
<a title="<div>some text 1</div>"> </a>
Pass this as parameter in function
<div onClick="openList(this);">
function openList($this)
{
$($this).find('a').each(function(){ // To get all <a> tag title
var getTitletxt = $(this).attr("title");
console.log(getTitletxt );
});
}
Related
I need to display the title value of the image (class name: media_image) in another p tag (class name: media_folder_title) for every row. But I can't able to get the value. I have attached the sample code here.
Screenshot:
HTML Code:
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
jQuery Code:
$(".media_folder img.media_image").each(function(){
var imgtitle = $(this).attr("title");
console.log(imgtitle);
setTimeout(function(){
console.log("settimout ok");
$(this).append("<p>"+imgtitle+"</p>");
}, 3000);
});
The problem is with the $(this) in the timeout because it's no longer the image but the window.
Also, append aims to append an element inside another element. It's not possible appending an element inside an image.
As your snippet implies, you want to append the p tag after the image, after is the right function for that.
$(".media_folder img.media_image").each(function() {
const $img = $(this);
const imgtitle = $img.attr("title");
setTimeout(function() {
$img.after("<p>" + imgtitle + "</p>");
}, 3000);
});
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Change the selectors in the first line into:
.media_folder img .media_image
Sometimes space is important.
Your problem is that you are trying to append something inside an img tag, which is not possible - as with a few other html elements.
What you are looking for is $.after()
Try $(this).after($('<p />').text(imgtitle))
I have the below html structure and I'm trying to get the text of h tags and add as a data- attribute in the corresponding tags:
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
So 'foo' should be set as a data attribute value for anchor 1,2,3 elements and
'bar' should be set as a data attribute value for anchor 4. Something like this:
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>
<a data-custom="bar" href="#">anchor4</a>
I tried to iterate over the elements and I'm struck at the second loop.
$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});
You have an extra double quote two times in your HTML. But, fixing that and foregoing JQuery (which is overkill for such a trivial task), see comments inline below:
// Loop over the links
document.querySelectorAll("div.link > a").forEach(function(item){
// Set the current link data-custom attribute to the nearest
// .body ancestor and the first heading element within that text
item.dataset.custom = item.closest(".body").querySelector(":first-child").textContent;
console.log(item);
});
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
I have this HTML:
<p></p>
<div class="comment_like">
<span class="reaction_2 tooltipstered" id="like13seperator2" rel="unlike"><i
class="likeIconDefault"></i>Like</span>
</div>
Now I want to add this div: <div class="commentLikeCount"></div> before this comment_like class using jQuery.
I am trying with this code:
$("#like"+posts_id).parents(".comment_like").prepend('<div class="commentLikeCount"></div>');
but somehow not working :(
Updated for the new Questions:
Now I have that HTML:
<p></p>
<div class="commentLikeCount">
<br>
<span class="float-right"> 1</span>
<img src="assets/images/db_haha.png" alt="" class="float-right old">
<img src="assets/images/db_love.png" alt="" class="float-right">
</div>
<div class="comment_like">
<span class="unLike_2" id="like13seperator2" rel="unlike">
<i class="loveIconSmall likeTypeSmall"></i>Love
</span>
</div>
Now, I just want to remove the last Img from the coomentLikeCount class.
You can use insertBefore:
$('<div class="commentLikeCount" />')
.insertBefore($("#like"+posts_id).parents(".comment_like"))
Or before:
$("#like"+posts_id).parents(".comment_like")
.before('<div class="commentLikeCount" />')
If you're inserting commentLikeCount in every .comment_like, then just use $('.comment_like') instead of $("#like"+posts_id).parents(".comment_like")
Regarding your comment:
well if I already have this div then how can select this div?
You can prepend using insertBefore like:
$('.commentLikeComment').insertBefore($("#like"+posts_id).parents(".comment_like"));
To your updated question, you can remove last image like:
$('.commentLikeCount img').last().remove()
You can do with before().
$(".comment_like").before("<div class='commentLikeCount'></div>");
Close button which remove the elements from DOM, work only on the second click.
Here is HTML part of button: That is closeBtn.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
closeBtn
</div>
</div>
</div>
</div>
You should use list.childNodes[1] because the list.childNodes[0] represent the #text node that is the whitespaces after <div id="main">. So, in first click it was removing that node and in second click it was removing the actual node with <div class="nanoSaturnBanner">
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[1]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.
As childNodes get none element nodes as well, like text and comment, use e.g. children instead to get the first actual element.
Note, with that you also make sure getting the element no matter how many "none element nodes" their might be in your markup.
Stack snippet
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.children[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
function removeHeader() {
var list = document.getElementById("main");
list.remove(list.childNodes[0]); // replacing removeChild with remove worked
}
Check the fiddle.
I have dynamically generated div's whose content contains an anchor link and path to an image.
I also have a modal box with an image tag in.
What I am trying to do is onclick of the anchor link, set the image tag path which is in the modal box.
Currently what my code does is no matter what anchor link I click, its always setting image path to the first path link.
Here is my JSFiddle link
JSFiddle
My Code:
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
<span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
$(".ads-links").each(function(index){
$(".ads-links").on("click", function(e){
e.preventDefault(); var imgsrc = document.getElementById('sLink')
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src',imgsrc.innerHTML);
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
If you click on Test title one, you will image name 350x250 displayed in the modal box, and if you close the modal box and now click on test title two, instead displaying the image 450x350 just displays the first image.
What am I missing?
Thanks and appreciate it
You are selecting the first sLink no matter which is anchor is clicked.
var imgsrc = document.getElementById('sLink');
Instead you need to base this on the sLink closest to the anchor clicked.
var imgsrc = $(this).parent().find('#sLink')[0];
//This goes up a level and finds the sLink that is in that same parent//
Note
that an ID should be unique and is likely causing part of your confusion, in this case a class might be just as useful.
your outer loop is superfluous and might cause you trouble down the road.
Updated Your Fiddle: https://jsfiddle.net/0dmc9rvt/25/
$(".ads-links").each(function(index) {
$(this).on("click", function(e) {
e.preventDefault();
debugger;
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src', $(this).parent().find('.sLink').html());
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/">
<h2>Test Title One</h2>
</a>
<div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span class="hide sLink">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/">
<h2>Test Title Two</h2>
</a>
<div class="coupon-text"></div>
<span class="hide sLink">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>