I have the following HTML:
<div class="windowtemplate movingwindow" style="display: block;">
<div class="top">Attenzione <span class="closebutton"></span></div>
<div class="body">
<p>texthere</p>
<span class="genericbutton">Close</span>
</div>
<div class="bottom"></div>
</div>
I'm trying to hide this box (starting from div class="windowtemplate movingwindow") with jQuery with this code:
function closedialog() {
$(this).parent("windowtemplate").hide();
};
But this doesn't sort any effect, where i'm wrong?
(I'm a newbie with jQuery, so, sorry if it's a really simple problem, but I can't find any solution!)
try this
<span class="genericbutton">Close</span>
and this for your js
function closedialog(element) {
$(element).closest(".windowtemplate").hide();
};
this here doesn't refer to the clicked element.
The selector is wrong, missing . for the class selector.
.parent() doesn't select the grandparent elements, you should use .closest() instead.
You should avoid using attribute event handlers.
$('.genericbutton').on('click', function() {
$(this).closest('.windowtemplate').hide();
});
If the .windowtemplate is generated dynamically you should delegate the event, if you are using jQuery 1.7+ you can use the .on() method:
$(document).on('click', '.genericbutton', function() {
$(this).closest('.windowtemplate').hide();
});
First of all you missed the dot signifying a class and second parent() selector searches only level up in the tree, you need parents().
Use this code -
$('.genericbutton').on('click', function() {
$(this).parents(".windowtemplate").hide();
}
Related
How to remove data-equalizer-watch tag from this div by using jquery
<div class="row" style="position:relative; height:784px;" data-equalizer-watch="">
Can use removeAttr()
$('[data-equalizer-watch]').removeAttr('data-equalizer-watch')
Try:
$(something).removeAttr("data-equalizer-watch")
see: JQuery documentation on api function removeAttr
You can add an additional class to your div like:
<div class="row other" style="..." data-equalizer-watch="">...</div>`
and from jquery do this: $('.other').removeAttr('data-equalizer-watch');
If you want, you can also use an event listener like:
HTML:
<button id="btn">Remove Equalizer</button>
JavaScript (jQyery):
$('#btn').click(function() {
$('.other').removeAttr('data-equalizer-watch');
});
I am working on a small system that uses collapsable blocks - for this I am have a css class that toggles on or off depending on the jQuery dependancy.
The code I am using is:
$("#click_me").on("click", function () {
$("#clicked_action").toggleClass("show");
});
And this works, but is not what is needed. What is need is:
$(".collapse-header").on("click", function () {
$(this).closest(".collapse-body").toggleClass("show");
});
But this does not work.
I am not getting any console errors, so any help is apprecated
EDIT HTML value:
<div class="collapse-header" id="click_me">
<span class="float-left">Click me</span>
<span class="float-right"><span class="glyphicon glyphicon-plus"></span></span>
<hr class="hr" />
</div>
<div class="collapse-body" id="clicked_action">
I'm collapsed
</div>
You are looking for
$(this).parent().find(".collapse-body")
About .closest
$(element).closest(selector) is to find the first element which matches selector in traversing up through element's ancestors.
In your case, your elements are at the same level ("siblings") so .closest doesn't work.
I need a little help with removing the href element of the below 'a' element:
<div class="carousel__tape-item js-product">
<div class="sale-content__cell">
</div>
</div>
This is my attempt but it doesn't work:
var a = $(".carousel__tape-item .sale-content__cell");
a.find("a").removeAttr("href");
Any ideas?
You want to use the multiple selector syntax for jquery
$(document).ready(function() {
$('.carousel__tape-item.js-product').find('a').removeAttr('href');
});
See it in action: https://jsfiddle.net/ahc1uLdj/
I'm loading div element through jQuery .load() method like this:
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList");
});
Through that I get list of items, let's say 5 of them.
<div class="module-wrapper">
<div class="genericItemList">
<div class="genericItemView">Item 1</div>
<div class="genericItemView">Item 2</div>
<div class="genericItemView">Item 3</div>
<div class="genericItemView">Item 4</div>
<div class="genericItemView">Item 5</div>
</div>
</div>
Now I want to use jQuery .remove() because I want to show just first 3 items.
HTML above is just example, in reality each item has a lot of HTML code so I want to use jQuery .remove() instead of CSS display:none.
I do that like this:
$(window).load(function() {
$(".module-wrapper .genericItemView:gt(2)").remove();
});
This is working only Chrome, but not in Firefox or IE, where I can see all 5 items.
Any suggestions?
To ensure that code only runs after the elements have been loaded, you should put it in the callback function passed to load():
$(document).ready(function() {
$(".module-wrapper").load(
"index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList",
function() {
$(".module-wrapper .genericItemList:gt(2)").remove();
}
);
});
Your class selector may also be wrong, I tried to rectify it in the code above. It looks like you want to match descendants of .module-wrapper that expose the genericItemList class, but your original selector matches the elements that expose both the module-wrapper and genericItemView classes instead.
change genericItemList to genericItemView
$(".module-wrapper .genericItemView:gt(2)").remove();
Change your class name genericItemView to genericItemList.
$(".module-wrapper .genericItemList:gt(2)").remove();
See Demo
Change it $(".module-wrapper.genericItemView:gt(2)").remove(); to $(".module-wrapper .genericItemList:gt(2)").remove();
add space before .genericItemList
$(".module-wrapper .genericItemList:gt(2)").remove();
You can use the success callback of the load() method to write dom manipulation
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList", function(){
$(".genericItemView:gt(2)", this).remove();
});
});
I have the following structure:
<div class="foo">
<div class="moo">
<div class="too"> <input type="hidden" val="56"/></div>
</div>
</div>
<div class="foo">
<div class="moo">
<div class="too"> <input type="hidden" val="58"/></div>
</div>
</div>
Continued...
//jQuery Code
$('.too').live('click',function(){
var next_value = $(this).next('.too').find('input').val();
console.log(next_value);
});
Now I want the value of the next "too" input. How can I get this? It's not working.
Your problem is that .next() traverses sibling elements. One approach would be to climb up the DOM tree, then back down. For example:
$('.foo').on('click', '.too', function () {
var next_value = $(this).closest('.foo').next().find('input').val();
});
Also, you should try to avoid .live(). If you are using jQuery 1.7+, you'll want to use .on() (as shown in my example). If you are using anything before 1.7, try .delegate() or .bind().
First off, do not use .live. Use event delegation.
Second, .next only works with siblings. You can get the next sibling in a variety of ways -- assuming that the the .foo / .too structure is unique to the document, you can use the following:
var next_value = $(".too").eq($('.too').index(this) + 1);
$('.too').live('click',function(){
var next_value = $(this).parent('.foo').next().find('input').val();
console.log(next_value);
});
by the way,i think you should give up .live().