I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class
I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.
Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});
Related
I have a really simple problem.
How can I find the first previous element of another element? I tried the code below without success.
HTML:
<div class = "A">HERE</div>
<div class="B">
<div class="C" style="width:50px;height:50px;background-color:#000000;"></div>
</div>
JS:
$('.C').click(function() {
alert($(this).closest('.A').html());
});
Fiddle: http://jsfiddle.net/Mcujp/4/
If you are trying to get the preceding sibling, use .prev().
If you are trying to get the sibling of the parent (like in your example) use .parent().prev().
Try this:
$('.C').click(function() {
alert($(this).parent().prev('.A').html());
});
$('.C').click(function() {
alert($(this).closest('.B').prev('.A').html());
});
if you want to target closest children of top parent you can do so as something define below.
lets assume you have an HTML like
<div class="top-parent">
<div class="parent">
<button class="add-button">Child of 1st Parent DIV</button>
</div>
<div class="parent">
<button class="add-button">Child of 2nd Parent DIV</button>
</div>
</div>
<script>
$(document).on('click','.add-button',function(){
$(this).parents('.parent').prev().closest('.parent').find('.add-button').text('im clicked by one of the button next to my parent')
$(this).parents('.parent').remove();
})
</script>
similarly if you want to target grandparent next parent containers children just change .prev() to .next()
hope i made it simple to define :)
<div>
<div>
<div class="one">child of 1 st Div</div>
</div>
<div>
<div class="two'>child of 2 st Div</div>
</div>
<div>
<div class="three">child of 3 st Div</div>
</div>
</div>
Here what I want to do is on clicking the div with class="one" I want to change the content of the third div where class="three"
You have a typo error here : <div class="two'> it should be this : <div class="two">
For the script, there are many way to do it, here is one :
$(function(){
$('.one').click(function(){
$('.three').text('hey');
});
});
Live example
In jQuery, you can attach a click event handler to a jQuery object using the click method. You select an element using the global jQuery function (usually jQuery or $). To select an element with a specific class, prepend . to the class.
$('.one').click(function(event) {
// this function will be fired when the div with class `one` is clicked
var $three = $('.three');
// $three is now a jQuery object representing the div
// DOM element with the class `three`
// your code here
});
First of all in your code you should correct your code for class = "two". In order to select a div use jquery .on() event handler.
$('selector').on('click',callback());
Refer to the following code.
$('.one').on('click',function(){
$('.three').addClass('changeColor');
})
I have also created a jsFiddle: https://jsfiddle.net/58kng68a/
Similar stuff has been asked earlier but I could not find this.
<article class="fyre-comment-article>
<div class="fyre-comment-wrapper">Parent Post
<div class="fyre-outer-comment-container"> Contains all child
<div class="fyre-comment-article">Single child with the same pattern as parent </div>
</div>
</article>
I was able to handle the collapsing when parent div closes before child and is not in the parenthesized format.
How to collapse (onclick) the Parent Post by only showing "Parent Post Details" and same should be applied internally to each Parent Post.
Thanks,
Your class attribute in article tag is missing a closing quote and one of the div tags isn't getting closed at all.
But basically you can just do:
$('.fyre-comment-article').click(function() {
$(this).find('.fyre-outer-comment-container').toggle();
});
which will show/hide the two most nested divs when you click on the text inside the article tag.
Here's a JSFiddle.
Update
If you're adding elements to DOM after the script loads, then the binding doesn't work for them and you can fix it for instance by using .on() method, like this:
$(document).on('click', '.fyre-comment-article', function() {
$(this).find('.fyre-outer-comment-container').toggle();
});
You may try this:
HTML:
<article class="fyre-comment-article">
<div class="fyre-comment-wrapper">Parent Post
<div class="fyre-outer-comment-container"> Contains all child
<div class="fyre-comment-article-inner">Single child with the same pattern as parent </div>
</div>
</div>
</article>
jQuery:
$(function() {
$('.fyre-comment-wrapper').click(function() {
var $article = $(this).find('.fyre-comment-article-inner');
if (!$article.is(':visible')) {
$article.slideDown(); //or .fadeIn() or .show()
} else {
$article.slideUp(); //or .fadeOut() or .hide()
}
});
});
Here is a demo
Edit
If you want 'Contains all child' label to appear and disappear too, you have to write
.find('.fyre-outer-comment-container');
instead of
.find('.fyre-comment-article-inner');
Demo 2
I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});
Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/
try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();
Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});