I'm trying to add a class to an existing div that has multiple classes but doesn't work, the class is not added.
I've added this on header (it's s shopify template):
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.wk_right_header_inner wk_font_weight_bold wk_font_family wk_paddingbottom10').addClass('new-class');
});
</script>
The div looks like this (with no space after <):
<div class="wk_right_header_inner wk_font_weight_bold wk_font_family
wk_paddingbottom10"> Test </div>
Thanks
You need to do
$('div.wk_right_header_inner.wk_font_weight_bold.wk_font_family.wk_paddingbottom10').addClass('new-class');
});
Because now it thinks the other classes are sub elements.
Have a look a this:
jQuery(document).ready(function($) {
$(' .wk_right_header_inner ').addClass('new-class');
});
.new-class
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wk_right_header_inner wk_font_weight_bold wk_font_family wk_paddingbottom10"> Test </div>
Related
I am making a gallery and in that gallery, there would be images wrapped in divs. In jQuery, I could call these divs like:
var card = $('.card');
This card variable will now contain all the elements with the 'card' class. Now, what I want to happen is whenever I click on a 'card', it would grab that very instance of card (I'm thinking by getting its index onclick) and do something with it as object-oriented as possible (though I never had much experience with it)
You can use simple this object:
https://codepen.io/bra1N/pen/ERXPJw
$('.card').on("click",function() {
$(this).css('background', 'red');
});
.card {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
Here is what you can do:
Dummy HTML:
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
jQuery needed:
$('.card').click(function() {
alert($(this).text());
});
Here is the link to the jsfiddle supporting this answer.
$('.card').click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
Using JS or Jquery (preferred JS) how can I change the display style of an element after clicking on another element (both elements identified by their respective classes).
The below doesnt seem to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2" style="display: block;">lo</div>
<script type="text/javascript>
$(function() {
$(".xyz").click(function() {
console.log("element with class xyz was clicked");
$(".abc").css('display': 'none');
});
});
</script>
the console doesnt even log anything
It looks like you are trying to reference your IDs by using CLASS syntax in your jQuery selector.
Instead of using $(".xyz") use $("#xyz"). Same for your $(".abc") selector.
Hope that helps!
You should use document.querySelector(cssSelector) for getting elements by class or id or document.getElementById to get elements by id only.
Here is VanilaJS solution:
var firstElem = document.querySelector(".class1");
firstElem.addEventListener("click", function(event){
var secondElem = document.querySelector(".class2");
secondElem.style.display = "none";
})
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2">lo</div>
i'm really new to this so bear with me
I have this:
<div id="A" class="B"></div>
<div id="Y"></div>
I need this:
if div #A has class .B, add class .Z to div #Y
I realise it's a basic script but i can't figure it out.
Please help :)
Thank you
<script>
if ( $("#A").hasClass("B") ){
$("#Y").addClass("Z")
}
</script>
It is pretty simple if you take a look at the jquery docs.
As you described it correctly:
if($('#A').hasClass('B')) {
$('#Y').addClass('Z')
}
jQuery's hasClass docand
jQuery's addClass doc
You can use hasClass() to check class is exists on element and then use addClass() to add class.
$(document).ready(function(){
if($("#A").hasClass("B"))
{
$("#Y").addClass("Z")
}
console.log($("#Y").attr("class"))
});
<div id="A" class="B">A</div>
<div id="Y">Y<Y/div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
I am trying to create a color picker using jscolor by clicking on a div, something like this doesn't work.
<div id='aa'>make anohter</div>
<div id='bb'></div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jscolor/jscolor.js"></script>
<script>
$( "#aa" ).click(function() {
document.getElementById("bb").innerHTML = "<input class='color'>";
});
</script>
I creates a input in that div, but not a jscolor.
I originally wanted to use .load('sample.html') on a div, the sample.html has a color picker, but it didn't work too.
I tried so many stuff, only this seem to work:
$('#somediv').click(function(){
$('#colorpicker').appendTo( "#newplace" )};
but then it will remove the #colorpicker, which will make my click work only one time. I tried to use clone methods, didn't work. Thanks in advance!
$("#aa").click(function() {
document.getElementById("bb").innerHTML = "<input class='color'>";
jscolor.installByClassName('color');
});
#aa {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='aa'>Show JS color pickr</div>
<div id='bb'></div>
I have this HTML:
<body>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<p>asdfasdfasdfas dsadf</p>
<p>asd'lfkasdf</p>
<script src="jquery.js"></script>
<script src="test.js"></script>
</body>
I want to add a class to all body elements except my first div (which has the id called switcher), when I click on the Large print button.
I have tried
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body:not(:first-child)").addClass("large");
});
});
and
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body:not(div)").addClass("large");
});
});
and
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body").not("#switcher").addClass("large");
});
});
but none seem to work (the class applies to all elements).
I don't want to find an alternate way like selecting only p elements. I just want to understand why the selectors I used don't work...
You need to exclude the document.body itself. Like
$("body *").not("#switcher").addClass("large");
This will query for all children of body, excluding #switcher. Maybe more convinient:
$(document.body).contents().not('#switcher').addClass('large');
$("body").children().not("#switcher").addClass("large");