I have this html code:
<article class="about">
<header>
<div class="hed"></div>
</header>
<div class="contentt"><content>
</content></div>
</article>
and this js:
$(".hed").unbind("click").click(function(){
$(".contentt", this).hide();
}
I need hide class contentt, when I click on class hed, but I have more article, so I need hide that with using classes. Some ideas?
.contentt is not a descendant of .hed, so your approach won't work. Here is the better way:
$('.hed').unbind('click').click(function() {
$(this).closest('article').find('.contentt').hide();
});
Here the script gets the closest article parent and finds the .contentt block in it's descendants.
Related
Can you please take a look at this demo and let me know why I am not able to set the height of .box dynamically?
$(function(){
$(window).load(function(){ // On load
$('.box').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.box').css({'height':(($(window).height()))+'px'});
});
});
<section>
<div class="col-md-12" id="box-1">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-2">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-3">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-4">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-5">Height has been set!</div>
</section>
First, you are using the wrong selector. You need to query for your class which is named "col-md-12".
Then, you are using the window.load() event which was removed from JQuery in 3.0 (see here). You can either use $(document).ready(function() {}) or $(window).on("load",function(){})
Your code should look like this:
$(function(){
$(document).ready(function(){ // On load
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
$(window).resize(function(){ // On resize
$('.col-md-12').css({'height':(($(window).height()))+'px'});
});
});
You're referring to a class that's not present.
Instead of $(".box"), use $("[id^='box-']") - you're not looking for the ones with "box" class but the ones with an id property starting with the string 'box-'.
(Alternatively, you could add a "box" class to each element you want to size and leave the original jQuery selector; maybe it's a better approach, it depends on the logic of the rest of your site. You decide.)
$("[id^='box-']")
$(".box") and divs like class="col-md-12 box"
I have this div structure after clicking inside class "4u" i am calling one click event but dont know how to get data inside <p> tag.
HTML:
<div class="4u 12u(mobile)">
<section>
<header id="dynamicCampingDesc13">
<p>Loren ipsum</p>
</header>
</section>
</div>
Click event:
$(function() {
$(".image").click(function() {
alert($(this).attr('id'));
});
});
First thing, you cannot click on the <a> tag, because of its empty nature. You do not have a clickable area. But although, you can make it clickable by giving some padding or setting width and height through CSS.
Secondly, the way you need to get the contents of the <p> tag is:
$(function() {
$(".image").click(function() {
$(this).next("header").find("p").text();
});
});
Finally, the class naming. The class 4u 12u(mobile) I am not sure if this is valid. It would be better to change it to something like 4u 12u-mobile.
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.
You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example
For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/
I'm having trouble getting my jQuery to work correctly. I have this HTML structure:
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
When the 'button-show' anchor is clicked, it should hide it's own div, show the above 'button-hide' div and toggle the above 'hide' div:
$(document).ready(function(){
$(".hide").hide();
$(".button-hide").hide();
$("div.button-show a").click(function(){
$(this).closest("div.hide").slideToggle();
$(this).closest("div.button-hide").show();
$(this).hide();
});
});
None of this works for me, am I mis-using the 'closest()' command here?
Just a bit different from the others...
$(".button-show a").click(function(){
$(this).parent().siblings(".button-hide").show();
...
});
You are matching closest on the link not the parent div. Should be .parent().closest()
Yup, closest traverses the ancestors like parents() does. The div above it is NOT an ancestor but a sibling(look at alex's answer). if you had a container div for those divs its better to just use that as a reference like this:
<div class="parent-container">
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
</div>
then in your jquery
$(".button-show a").click(function(){
$(this).parents(".parent-container").find(".button-hide").show();
etc
})