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.
Related
I'm setting up a store catalog in which I have a div with multiple list items containing 2 divs (one for picture and another one for product summary and add to cart button)
Structure would be something like this.
<div>
<ul>
<li class="product">
<div class="product-image">
<img>
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<li class="product">
<div class="product-image">
<img>
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<ul>
</div>
I want to move the Add To Cart button to the div that contains the image.
I tried with this jQuery
jQuery(document).ready(function(){
jQuery(".product-image").append(jQuery('.button'));
});
But this adds every sigle button to the image div, and I end up with 10+ add to cart buttons on every product. Is there any way to only move the button within each li element to its respective image div?
Use a .each() loop and then move the button with the same index.
let buttons = $(".button");
$(".product-image").each(function(i) {
$(this).append(buttons.eq(i));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li class="product">
<div class="product-image">
<img>Product 1
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<li class="product">
<div class="product-image">
<img>Product 2
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<ul>
</div>
This below code giving me runtime error. I just want the browser to go to top while the page is routed from footer link. It just stick to the bottom and need to scroll.
document.getElementsByClassName('homemenu').scrollTo(0, 0);
header.component.html
<header class="top-head homemenu" *ngIf="showMenu == 'home'">
<div class="container-fluid">
<div class="row" [ngClass]="{'justify-content-center': onlyLogo}">
<div class="col-3 lm-logo"><img src="/assets/images/lm-logo.svg"></div>
<div class="col-9" *ngIf="!onlyLogo">
<div class="d-flex justify-content-end">
<ul class="menu_wrap d-flex">
<ng-container *ngIf="homemenu; else individual_page">
<li>Home</li>
<li>Individuals</li>
<li>Corporate</li>
<li>Hiring Managers</li>
<li class="dropdown_menu"><a class="dropdown-toggle nav-link" [routerLink]="['/partners']" routerLinkActive="active" aria-expanded="true" data-toggle="dropdown">Partners</a>
<div class="dropdown-menu">
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico5.png">
<a href="javascript:void(0)" [routerLink]="['/partners/content-owners']" routerLinkActive="active" >Content Owner</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico3.png">
<a href="javascript:void(0)" [routerLink]="['/partners/influencers']" routerLinkActive="active" >Influencers</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico2.png">
<a href="javascript:void(0)" [routerLink]="['/partners/localmasters-for-startup']" routerLinkActive="active" >Localmasters for Startup</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico4.png">
<a href="javascript:void(0)" [routerLink]="['/partners/customer-training-solutions']" routerLinkActive="active" >Customer Training Solutions</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico1.png">
<a href="javascript:void(0)" [routerLink]="['/partners/solution-partner-program']" routerLinkActive="active" >Solution Partner Program</a>
</div>
</div>
</li>
</ng-container>
<ng-template #individual_page>
<li>Home</li>
<li>How It Works</li>
<li>Be a Mentor</li>
</ng-template>
</ul>
<button class="btn top-btn" [routerLink]="['/login']" type="button">Sign In</button>
<!-- (click)="showSiteMap = !showSiteMap" -->
</div>
</div>
</div>
</div>
</header>
The above code works as expeceted but leave a error as shown in screenshot.
getElementsByClassName returns HTMLCollection.
You have to specify the exact item within the HTMLCollection, that you want to use scrollTo on. Ex.:
document.getElementsByClassName('homemenu')[0].scrollTo(0, 0);
Or use more modern function to query html, like querySelector. Ex.:
document.querySelector('.homemenu').scrollTo(0, 0);
To updated question
As I can see, you have that class assigned to element, that is rendered by angular. Make sure to call this function only when angular has rendered this tag.
Also, if code works as expected, then you can just check for null value the element, to get rid of the error:
document.querySelector('.homemenu')?.scrollTo(0, 0);
document.querySelector('.homemenu').scrollTo({top : 0});
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>');
})
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();