I have this nest of links with icon on it.
When a link was clicked, the icon associated with it will changed to a loading image to shown that the link is active.
The problem is on the second click or more, the loading image won't change back to the icon and display multiple loading images.
How to make it only show one loading image and revert the previous clicked icon.
The HTML and Script
$('.parent a').click(function(a) {
a.preventDefault();
var $icons = $(this).siblings('i');
$($icons).replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');
$('img.active').not($icons).replaceWith('<i class="typcn typcn-thumbup"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
first link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
second link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
third link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
forth link
</div>
Problem with your implementation is that is .not($icons) is not excluding the cuurent img element as .replaceWith() returns the original element which is removed from the DOM.
Cache a reference to img.active and use it to replace the element later.
$('.parent a').click(function(a) {
a.preventDefault();
//Cache active images
var images = $('img.active');
//Replace i
$(this).siblings('i').replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');
//Replace images
images.replaceWith('<i class="typcn typcn-thumbup"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
first link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
second link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
third link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
forth link
</div>
Create a jQuery object and use it with .not() and .replaceWith() function.
$('.parent a').click(function(a) {
a.preventDefault();
var image = $('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');
$(this).siblings('i').replaceWith(image);
$('img.active').not(image).replaceWith('<i class="typcn typcn-thumbup"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
first link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
second link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
third link
</div>
<div class="parent">
<i class="typcn typcn-thumbup"></i>
forth link
</div>
Please try this:-
$('.parent a').click(function(a){
a.preventDefault();
var $icons = $(this).siblings('i');
$('img.active').not($icons).replaceWith('<i class="typcn typcn-thumbup"></i>');
$($icons).replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');
});
try this. Don't replace it with a class attribute, add it after you replace the 'i' tag.
$($icons).replaceWith('<img src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30" />');
$($icons).addClass('active');
Related
How can I can add .active class to the each link which's parent has a specific data attribute?
I need to add the .active class to the .slide-link not the parent which holding the data attribute
$('.slide-link[data-slide="0"]').addClass('active');
$('.slide-link').parent().data('[data-slide="0"]').addClass('active');
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" data-slide="0">
<a class="slide-link" href="#">0</a>
</div>
<div class="" data-slide="1">
<a class="slide-link" href="#">1</a>
</div>
<div class="" data-slide="2">
<a class="slide-link" href="#">2</a>
</div>
What you should do is add the class to the children (with the slide-link class) of all elements that have [data-slide="0"], like so:
$('[data-slide="0"]').children('.slide-link').addClass('active');
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" data-slide="0">
<a class="slide-link" href="#">0</a>
</div>
<div class="" data-slide="1">
<a class="slide-link" href="#">1</a>
</div>
<div class="" data-slide="2">
<a class="slide-link" href="#">2</a>
</div>
Your first snippet didn't work, because there aren't any elements with a class of slide-link and data-slide="0". Your second snippet produces an error, because jQuery's data method only returns strings or undefined, which both don't have an addClass() method.
I'm looking to add a button after a specific element on an existing page. This is the code I've tried so far.
$('.collection-nav').after('<span class="button">This is a button.</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="index-navigation collection-nav" role="navigation">
<div class="collection-nav-item" data-url-id="process">
<a href="/process/" class="process">
<span class="collection-nav-item-span">Process</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="our-breads">
<a href="/our-breads/" class="our-breads">
<span class="collection-nav-item-span">Bread</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="ourculutre">
<a href="/ourculutre/" class="ourculutre">
<span class="collection-nav-item-span">Culture</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="about">
<a href="/about/" class="about">
<span class="collection-nav-item-span">About</span>
</a>
</div>
</nav>
Anything I'm missing here?
as far as I can see, the code you wrote is correct, but it needs to be triggered to work.
you can add a button like this => <button id="btnAfter">After Element</button>
you can try again later your code:
$('#btnAfter').click(function(){
$('.collection-nav').after('<span class="button">This is a button.</span>');
})
I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.
This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?
$(document).on("blur", "#txtSearchTerm", function () {
$('#searchResult').hide();
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>
<div id="searchResult"> will be hidden on every click of elements inside it.
You can simply turn off your blur event with the following code.
$(document).off("blur", "#txtSearchTerm");
You dont need blur event to achieve that:
$(document).click(function(e) {
if ($(e.target).is("div") && $(e.target).has("ul > li")){
$('#searchResult').show()
}
else $('#searchResult').hide()
if ($(e.target).is(':focus')){
$('#searchResult').show()
}
})
#searchResult{
margin-top: 50px;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>
You can't do that, because the blur is fired before the click on the child.
So you would need to add an event handler on the document which closes the results. You cancel that event when someone clicks the results. Something like this:
$('#txtSearchTerm').click(function(e) {
$('#searchResult').show();
e.stopPropagation();
});
$(document).click(function(e) {
$('#searchResult').hide();
});
$('#searchResult').click(function(e) {
e.stopPropagation();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">Click here</div>
</a>
</li>
</ul>
</div>
My advise it to check relatedTarget and kill blur only if user clicks on certain elements.
$(document).on("blur", "#txtSearchTerm", function (e) {
if ($(e.relatedTarget).hasClass("no-blur")){
}else{
$('#searchResult').hide();
}
});
$(document).on("focus", "#txtSearchTerm", function () {
$('#searchResult').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
<div id="searchResult">
<ul>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
<li>
<a href="http://www.google.com">
<div class="title">Google.com</div>
<div class="content">click here</div>
</a>
</li>
</ul>
</div>
HTML
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap"> // this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
JS
$(".linksrtitle").click(function(){
$(this).next(".linksrwrap").slideToggle(); // doesn't work
});
Why this click event doesn't work. Console is empty.
Use nextAll()(with first(), if multiple sibling with same class are there) to get that. next() only select immediate following sibling.
$(".linksrtitle").click(function() {
$(this).nextAll(".linksrwrap").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap">// this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working
You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo
Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();