I have my posts lopping on an .each loop and I have a link to display comments on the bottom of the loop.
I want to show the comment section on click, but when I click comments for all posts open as well. I only want the one that's clicked to open.
I've tried a ton of different examples I've found on this site, but so far none of them have worked.
I'm sure this is extremely easy to accomplish, but I'm a JavaScript noob.
Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/
As well as the code snippet -
JS
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$('.artist-micropost-comments-container').toggle();
});
});
HTML
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
CSS
.artist-micropost-comments-container {
display: none;
}
The way that you are trying to grab the relevant element is wrong. You need to traverse the DOM with respect to the element that is being clicked. If you try to use the direct class selector in this case, then it would select all the elements which are having the supplied class.
Try,
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this).closest('.artist-micropost-social')
.next('.artist-micropost-comments-container').toggle();
});
});
DEMO
Use
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this)
.closest('.artist-micropost-social') //Find parent container
.next('.artist-micropost-comments-container') //Find next comments container
.toggle();
});
});
Try This SEE DEMO
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();
});
});
Related
How to add text from span tag to data-attr?
Example:
I have this code
<div class="clearfix colelem" id="u92-5"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
And I want to add iconsymbol to data-attr="iconsymbol" of the same element like a:
<div class="clearfix colelem" id="u92-5" data-attr="iconsymbol"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
Yes and it will be with all elements which has a title="icon"
<script>
$( document ).ready(function() {
$("[title*='icon']").attr('data-attr',function(){
// I don't know
}).removeAttr('title');
});
</script>
Do you know how to do it?
So I know it is very simple but I am new in jquery and I need in your help.
I hope you understood my question.
Here is an example that should work for you. There is probably a few ways you can pull this off, but this should hopefully get you started. Please see the attached JSFiddle to see this example in action
$(function() {
$('[title*="icon"] span').each(function(){
$(this).parent().closest('div').attr('data-attr', $(this).text())
});
});
Here is another way you can do this as well
$('[title*="icon"]').each(function(){
$(this).attr('data-attr', $(this).children().closest('span').text());
});
JSFiddle Example
Your <div>s should have attribute title="icon"
You are using a callback to attr() function, so return the value which you need to set inside the function using .text().
$(document).ready(function () {
$("[title='icon']").attr('data-attr', function () {
return $(this).find('span').text();
}).removeAttr('title');
});
Demo
I have a structure, such as
<div class="entry">
<p class="entry-text"><div class="nonmatched-sentence">some text goes here...</div></p>
</div>
how do I show all the nonmatched-sentence elements if they were made invisible before?
I now use this:
$(this).('entry-text').children('.nonmatched-sentence').show();
But it's not working...
Thanks!
You could go with this approach: http://jsfiddle.net/oejm2wfu/
For example I have created an event on the button click:
$("#btn").click(function(){
$(".nonmatched-sentence").each(function(){
$(this).show();
});
});
but you could do that on any event you want. Hope that helps
I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.
If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.
HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/
Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});
Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample
<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
});
});
For some reason, I can't get jQuery to do what I want it to do.
What I need is for the container div to disappear when one of its children is clicked.
Here's example HTML
<div id="container">
<a href="link">
<div id="child1">
When this is clicked, #container disappears,
including everything contained inside...
</div>
</a>
<a href="link">
<div id="child2">
...or when this one is clicked
</div>
</a>
</div>
Here's what I've tried.
$("#child1").click(function () {
$(#container).hide();
});
and
$("#child1").click(function () {
$(#container).fadeOut("fast");
});
Thanks in advance.
With this code, no matter how many elements you have in your #container div, clicking on them will hide the whole div :
$("#container").children().bind("click", function(e){
e.preventDefault();
$("#container").fadeOut();
});
See here : http://jsfiddle.net/pioul/Bd9Dc/
$("#child1, #child2").click(function(e) {
$(e.target).parents("#container").hide();
}
Something like that? Or more like
$("#container").children("div").click(function(e) {
$(e.target).parents("#container").hide();
}
$("#container").children().click(function(e) {
$("#container").hide();
}
From what you've posted, your selectors are not valid strings.
$(#container) will throw a syntax error, because the syntax should be $(selector) where selector is a string or an object.
So, just update your selectors from
$(#container)
to
$('#container')
Note : even this site's syntax highlighter gives you a hint that something is wrong!