Develop Reference

I need value of div custom attribute in Jquery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Please check code below ,
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>
I need custom attribute value of 'recline' attribute. If you see, there are same class name of its parent div(cp-color-item-content). But one is display none and another is display block. So, i need custom attribute value of 'display:block' div (i need 'manual' value).
Your help would be appreciated.
Thanks

While you should be using data-recline="power" for custom attributes, you can use
.attr("recline")
the selector can include :visible to exclude the hidden one, giving:
$(".cp-recline:visible").attr("recline")
Updated snippet (no change to HTML)
console.log($(".cp-recline:visible").attr("recline"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

For defining your own custom attributes in HTML, you need to use the prefix as data-*
To get the value of that custom attributes you have defined in your HTML through jQuery, you can use the .data() method.
Check the below demo:
let customAttributeValue = $('#this-is-my-id').data('this-is-custom-id');
console.log(customAttributeValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="this-is-my-id" data-this-is-custom-id="manual"></div>
Now coming to your code, you can try this:
let reclineValue = $('.cp-recline:visible').data('recline');
console.log("reclineValue is: ", reclineValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

Unable to Scroll to Div using <a href="#"> [React,react-scrollspy]

I'm using this library https://github.com/makotot/react-scrollspy to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :
<RewardContainer>
<div className="pageWrapper">
<div className="rewardInfoWrapper">
<div className="tabsContainer">
<div>
<Scrollspy
items={[
"section-1",
"section-2",
"section-3"
]}
currentClassName="is-current"
>
<li>
<a
href="#section-1"
className="c-side-nav__link"
>
Streak
</a>
</li>
<li>
<a
href="#section-2"
className="c-side-nav__link"
>
Gems
</a>
</li>
<li>
<a
href="#section-3"
className="c-side-nav__link"
>
Xp Points
</a>
</li>
</Scrollspy>
</div>
</div>
<div className="columnContainer">
<div className="tabInfo">
<div>
<div id="section-1">
<p>
This is Section 1
</p>
</div>
<div id="section-2">
<p>
This is Section 2
</p>
</div>
<div id="section-3">
<p>
This is Section 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</RewardContainer>
The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.

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>

jQuery emptying wrong div? [duplicate]

This question already has answers here:
How to append one jQuery element already in the DOM to another element?
(5 answers)
Closed 3 months ago.
I've been working on a filter plugin using HTML5's data-* attribute, but jQuery (or something) keeps emptying the wrong div.
Basically I have two divs with different classes. '.gallery-source' is the class of the div with ALL of the content (and the 'display' property is set to 'none' value, so it doesn't show up in the document); while '.gallery' on the first hand is empty but then given the contents of '.gallery-source'.
Once the user has selected options to filter in the dropdowns (an unordered list of items, with links that have data-* values matching some of the contents of '.gallery-source' data-* values), the '.gallery' div is emptied and then each matching content (same data-* values as set in the dropdowns) of '.gallery-source' is appended inside '.gallery'.
The code looks something like this:
// Append everything from .gallery-source to .gallery in order to show ALL work (filters may be applied later)
var gallerySource = $('.works-content .gallery-source').html();
$('.works-content .gallery').html(gallerySource);
// Attribute filtering for all work inside .gallery
$('ul#artist-dropdown li a, ul#technique-dropdown li a, ul#material-dropdown li a').on('click', function() {
// Get selected filter on form
var artistFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.artist > span').attr('data-filter-artist');
var techniqueFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.technique > span').attr('data-filter-technique');
var materialFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.material > span').attr('data-filter-material');
// Empty .gallery in order to fill it later with filtered work
$('.works-content .gallery').empty();
// Get filtered elements and append them to .gallery
$('.single-work[data-artist~="' + artistFilterValue + '"][data-technique~="' + techniqueFilterValue + '"][data-material~="' + materialFilterValue + '"]').each(function(){
$('.works-content .gallery').append($(this));
});
});
The document initially looks like this (both '.gallery' and '.gallery-source' are populated):
<div class="row works-content">
<div class="row">
<div class="small-12 medium-12 large-12 columns filter-dropdowns">
<div class="dropdown-wrapper">
Filtrar por:
<span class="dropdown-label">Artista</span>
<span data-filter-artist="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="artist-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-artist="all">Todos</span></li>
<li><span data-filter-artist="name-one">Name One</span></li>
<li><span data-filter-artist="name-two">Name Two</span></li>
</ul>
</div>
<div class="dropdown-wrapper">
Técnica:
<span data-filter-technique="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="technique-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-technique="all">Todos</span></li>
<li><span data-filter-technique="acrylic">Acrílico</span></li>
<li><span data-filter-technique="mixed-paper">Mixta sobre papel</span></li>
<li><span data-filter-technique="mixed-fabric">Mixta sobre tela</span></li>
<li><span data-filter-technique="oil">Óleo</span></li>
</ul>
</div>
<div class="dropdown-wrapper">
Soporte:
<span data-filter-material="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="material-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-material="all">Todos</span></li>
<li><span data-filter-material="fabric">Tela</span></li>
<li><span data-filter-material="paper">Papel</span></li>
</ul>
</div>
<ul class="button-group filter-buttons">
<li class="active show-all">Todas</li>
<li class="show-available">Disponibles</li>
<li class="show-sold">Vendidas</li>
</ul>
</div>
</div>
<div class="row gallery-source">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
<div class="row gallery">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de Obra"</li>
<li>Código ejemplo</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código ejempl5</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
</div>
But after selecting an option in one of the filter dropdowns, '.gallery-source' is empty :(
What am I missing here? I think I'm going crazy!
Anyway, any help will be much appreciated.

.append moves the entire node from .gallery-source to .gallery. You want to do this instead:
$(this).clone().appendTo('.works-content .gallery');
You can read about .clone() here.
Here's a jsFiddle demo.

The API docs of empty also say:
... If we had any number of nested elements inside <div class="hello">, they would be removed, too.
So your $('.works-content .gallery').empty() may remove more than you want it to.

jQuery Cycle Error: Cannot read property 'cycleW' of undefined

Not sure why I'm getting this error and can't figure it out? The cycle works, I'm just getting this error in the console and would like to fix it. That's why I'm here now :)
I'm creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:
// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
$(this).cycle({
fx: 'scrollHorz',
speed: 500,
pager: '.nav-pl' + i,
pagerAnchorBuilder: function(idx, slide) {
return '.nav-pl'+i+' li:eq(' + idx + ') a';
}
}).cycle('pause');
});
HTML:
<h6 class="carbon_heading">Top Prospects</h6>
<ul id="tab-nav" class="nav nav-tabs">
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
<div id="tab-wrap">
<div id="c2012" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl0">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2012 Player Rankings</p>
</div>
<div id="c2013" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl1">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2013 Player Rankings</p>
</div>
<div id="c2014" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl2">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2014 Player Rankings</p>
</div>
</div>
enter code here

I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He's going to fix this on the next release.