Add class to element if closest element contains string - javascript

I have some fixed HTML and I need to set a class to the element newgroup based on the element with the class relatedheader. As you can see in the HTML, the first element has a string - Accessories. I want to give the three elements below that element with the class newgroup to have class based on that string. Then I want the next set to have class from the next relatedheader element.
How do I do this with jQuery or vanilla JS? I guess the first step is to make the relatedheader element a parent?
What I got so far:
$('.relatedheader').nextUntil('.relatedheader').addClass('selected');
How do I make the script take the class dynamically releatedheader element?
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>Accessories/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>computers/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>

Here you go:
$(document).ready(function(){
$(".unfoldedlabel a").each(function(){
if($(this).text() != "")
{
$(this).closest(".relatedheader").nextUntil(".relatedheader").addClass($(this).text().replace("/",""));
}
});
});
LINK To JSFIDDLE

Here is the working fiddle.
$('.relatedheader').find('a').each(function() {
$(this).parents('.relatedheader').nextUntil('div.relatedheader').addClass('selected');
});
Here in the above example I'm looping through each a inside .relatedheader class and then adding selected class to all element until next .relatedheader.
NOTE: If you want to only add those class to next set of element as per .relatedheader a selection or some event then you can bind this functionality to that event only.
Hope this is what you need!

Related

get a href attribute and set this attribute to other div

I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.
You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});
(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ
First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.

Jquery :find class on click

I have to find a class content on click.
Following my HTML code
<div class="row team">
<div class="col-md-3">
<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">
<img src="img/team/Martin-Duff.png" class="img-responsive" />
</a>
<div class="content">
<p>paragaraph </p>
<p>paragaraph paragaraph </p>
<div class="details">
<!-- content for details div -->
</div>
</div>
By clicking on an image I need to get the HTML for details div. How do I get it?
I tried
$('.team .img-responsive').on('click',function(){
var content= $(this).closest('div.content').html();
console.log(content);
})
But this gives me undefined. Need your help with this.
Thanks!
closest selects the closest matching parent element (if any). The target element is the next sibling of the clicked element's parent. For selecting the target element, you can use the parent and next methods:
var content = $(this).parent().next('div.content').html();
div.content is a sibling of the parent of the img-responsive. You can find the related element by going up to the closest row and then finding the nested element. Not using next() makes it slightly less reliant on the markup layout.
var content= $(this).closest('.row').find('div.content').html();

Using jQuery to add class to containing li when a checkbox inside is clicked

Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).
Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");
Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.
As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});

Hide the closest div with a specific ID using Jquery

I am trying to hide a closest div with specific ID but its not working for me
Here is what I have tried.
HTML
<div style="width:50px; height:20px; background-color:green" id="myblock">other content</div>
<div>
<div style="width:50px; height:100px; background-color:yellow" id="dialog-box">content to hide</div>
<div> <a href="#" onclick="hideclosest(this);">
<span> Hide closest Div </span>
</a>
</div>
Script
function hideclosest(ctrl) {
$(ctrl).closest("#dialog-box").hide();
}
Here is Fiddle
http://jsfiddle.net/c2ewk44o/2/
Id should be unique on a page, therefore:
$("#dialog-box").hide();
will simply work for you. If you dont have unique id, then you have to convert them into classes or give all the elements unique id
Try to traverse properly. #dialog-box is not a closest element to that button. By the way it is an id, so you can select it directly with an id selector. But if you want to select it with some other means use the below code,
function hideclosest(ctrl){
$(ctrl).parent().prev("#dialog-box").hide();
}
DEMO
You meant something like:
function hideclosest(ctrl)
{
$(ctrl).closest("div").prev().hide();
}
or like:
function hideclosest(ctrl)
{
$(ctrl).parent().prev().hide();
}
To hide the closet div use that code
$(ctrl).prev("#dialog-box").hide();
Hope solve your problem.

show/hide div with dyamically assigned class

I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.
This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!
Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}

Categories