Develop Reference

Append elements with the same class to multple divs that also share a class

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>

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

siblings() in jQuery is not working

I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>

The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');

You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.

Multiple tab click function

Hi everyone i am trying to make a jquery tab but i want to use it multiple like for example in one page have 100 tab what can i do on that time.
I am trying in this DEMO link. If you click one blue button then you can see the tab. Click the red buttons like STARKS button then other tab also doesn't work. Anyone can help me here ?
<div class="icon_c">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>

You have 2 issues.
The 1st is on the initTabs_ function.
It takes all the .panel divs for both MaterialTabs, it should take only the ones that are childs of the MaterialTabs element.
You should replace:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = document.querySelectorAll('.panel');
For:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
The seccond issue is with the tabs ids and href srcs in both panels references to the same ids, if you change the second panel as follows:
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive">
a
</div>
<div id="lannisters-panel1" class="panel">
b
</div>
<div id="targaryens-panel1" class="panel">
c
</div>
</div>
</div>
It should work independently of the first one.
You can found the code modified here

What jQuery selector should I use to select a div class?

<div id="stage-1" class="stage">
<div class="section">
<section>
<h3 class="formHeader">Choose a category</h3>
<ul id="formNav">
<li>
<h4>Bathrooms, Kitchens, Bedrooms & Furniture</h4>
<div class="js-reveal">
</div>
</li>
</ul>
</section>
</div>
I am trying to select the .js-reveal element. What jQuery selector should I use to select it?

Use .(class name):
$('.js-reveal').text('Selected');
Please also note that you missed the closing square bracket in your </div> at the end.

Try this
HTML
<div id="stage-1" class="stage">
<div class="section">
<section>
<h3 class="formHeader">Choose a category</h3>
<ul id="formNav">
<li>
<h4>Bathrooms, Kitchens, Bedrooms & Furniture</h4>
<div class="js-reveal">
Hello world
</div>
</li>
</ul>
</section>
</div>
</div>
JS CODE
$(document).ready(function(){
/*to get html element*/
alert($('.js-reveal').html());
});
$(document).ready(function(){
/*to get containing text*/
alert($('.js-reveal').text());
});