Toggle a repeated class in jQuery - javascript

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?

You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>

Related

add data- attributes by reading values from DOM

I have the below html structure and I'm trying to get the text of h tags and add as a data- attribute in the corresponding tags:
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
So 'foo' should be set as a data attribute value for anchor 1,2,3 elements and
'bar' should be set as a data attribute value for anchor 4. Something like this:
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>
<a data-custom="bar" href="#">anchor4</a>
I tried to iterate over the elements and I'm struck at the second loop.
$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});
You have an extra double quote two times in your HTML. But, fixing that and foregoing JQuery (which is overkill for such a trivial task), see comments inline below:
// Loop over the links
document.querySelectorAll("div.link > a").forEach(function(item){
// Set the current link data-custom attribute to the nearest
// .body ancestor and the first heading element within that text
item.dataset.custom = item.closest(".body").querySelector(":first-child").textContent;
console.log(item);
});
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>

Can I check with jQuery if element has specific class and edit only this element?

if (jQuery("li.store .premise")[0]) {
jQuery(".address .arrow").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow"></span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span
class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>
Is there a way to check if an element contains specific class and if it does, then to edit only this or these elements.
I have a list of stores and I want if some of them contain specific class to remove the arrows.
I tried with this but it removes all elements with a class arrow and I want to remove the only storeеthat have the specific class which in this case is class="premise"
Closest using get parent element then find class for .arrow then remove method using removed.
$(".store .premise").closest(".address").find('.arrow').remove();
Once you have a collection of premises, use .closest to navigate to their ancestor address, from which you can get to the .arrows:
$('div.store .premise').closest('.address').find('.arrow').remove();
(assuming that the .store element in your actual code is a <li>, otherwise use div.store or just .store)
$('div.store .premise').closest('.address').find('.arrow').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow">arrow here</span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>

Set top level element node for jquery

I have the below page layout:
<div class="content">
<div class="main-content profile0">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
<div class="main-content profile1">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
</div>
Currently I have been doing things like
$('.messages').remove();
but I need to be able to set which div is actually the parent, so I can tell jquery to only look at the childer of the div "main-content profile1"
So that then
$('.messages').remove();
refers to the child of "main-content profile1" and not "main-content profile0"
You can use the find() like
$('.main-content.profile1').find('.messages').remove();
As AmmarCSE said, you can use find(), but you could also just change the selector.
$('.main-content.profile1 .messages')

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/

Replace class depending on event

If have a set of collapsible elements, in which I need to replace classes left and right depending on event isCollapse:
<div class="collapsible-set">
<div class="collapsible">
<h3>
<a class="left">
<span class="left"></span>
</a>
</h3>
</div>
<div class="collapsible">
<h3>
<a class="right">
<span class="right"></span>
</a>
</h3>
</div>
</div>
I need to toggle the classes. Is there an eaiser way to do this than what I came up with?
if (collapse) {
$('.left').addClass('topLeft').removeClass('left');
$('.right').addClass('topRight').removeClass('right');
} else if (!collapse) {
$('.topLeft').addClass('left').removeClass('topLeft');
$('.topRight').addClass('right').removeClass('topRight');
}
There must be an eaiser way to do this without writing so much code...
look at toogleClass http://api.jquery.com/toggleClass/
$('.collapsible:eq(0)').find('a').toggleClass('topLeft').toggleClass('left');
$('.collapsible:eq(1)').find('a').toggleClass('topRight').toggleClass('right');
This should do the trick
$(".collapsible").find(".topLeft, .left").toggleClass("topLeft", collapse).toggleClass("left", !collapse);
$(".collapsible").find(".topRight, .right").toggleClass("topRight", collapse).toggleClass("right", !collapse);

Categories