We Keep Coding

Add class to element if closest element contains string

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!

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;
}

How to close alert message div using javascript?

How to close alert message parent div using javascript?
Problem is parent div is closing but i need to close above parent div.
Here is my code:
$(".msg-error .btn-close").click(function(){$(this).parent().hide();});
.msg-error {
background:#ff0000;
color:#fff;
padding:10px;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">
<div class="msg-error">
<div class"container">
First error message <a class="btn-close">Close</a>
</div>
</div>
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close">Close</a>
</div>
</div>
</div>

You can use .closest() to specify the closest parent you want to achieve by using a selector.
$(".msg-error .btn-close").click(function() {
$(this).closest('.msg-error').hide();
});
With this function you can even change your HTML structure without having to edit your JavaScript code to deal with multiple level of .parent() calls, provided that you continue using the same CSS class for the selector.
FIDDLE: http://jsfiddle.net/8b7zt1g7/5/

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
http://jsfiddle.net/8b7zt1g7/4/
Or, little fancier:
$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});

You can chain .parent() calls together. Try:
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

you can try this way, by searching for that main parent div
you can use closest() or parents(), first option will return first match and seconds will return all matches, your choice
$(".msg-error .btn-close").click(function() {
$(this).parents(".msg-error").hide();
});
or going the parent twice
$(".msg-error .btn-close").click(function() {
$(this).parent().parent().hide();
});

Remove parent div without jquery
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close" onclick='Close()'>Close</a>
</div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>

jquery custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear

When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')

Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')

Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.

You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});

give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

Telling jQuery which (unique) div to do an action on

My plan is to have lots of boxes (an undefined amount). When show box is clicked under a box, it shows that particular box.
I have some unique divs in my html. The div is made unique by:
<div id="box-<%=box.id%>"></div>
In my application.js, I have
$('.show-box > a').click(function(){
$('#box').show();
});
I obviously need to have the box-id in the $('#box').show(); part but I'm unsure how to do that...
EDIT: adding more information
<div class="show-box">
Show
</div>
<div class="box" id="box-<%= box.id %>"></div>
The class is for styling.
Just to add, I know that the javascript link should link to an actual link. I'll fix that later.

You would use this inside the handler to refer to the specific .show-box > a that was clicked.
So it depends on what the relationship is between that and the box element you want to display.
When you say under, if that means that it is a sibling to the .show-box element, you can use .parent() to traverse up from the <a>, then use .prev() to traverse back to the box.
$('.show-box > a').click(function() {
// "this" refers to the <a> that was clicked.
$(this).parent().prev().show();
});
Ultimately, the correct solution depends on your actual HTML markup. If you provide that in your question, it would be helpful.
You could select by ID if you want, but it is often not necessary.

On easy way would be to name your box ids after you a ids, or write another attribute into the a. For example if your a tag's ID was "anchor1", assign the corresponding div an id of "box-anchor1". Then, reference it like this:
$('.show-box > a').click(function(){
$('#box' + this.attr('id')).show();
});

If the box and the link that shows it are logically related, you can skip the whole unique ID business by using the following:
HTML
<div class="container">
<div class="box">
<!-- stuff in the box -->
</div>
Show
</div>
jQuery
$("div.container a").click(function() {
$(this).prev().show(); // prev() will get the div.box element.
});
On the other hand, if they are not related structurally, you can use the fragment part of the URL to reference the box ID:
HTML
<div>
<div class="box" id="box-1">...</div>
<div class="box" id="box-2">...</div>
</div>
<div>
<a class="boxtoggler" href="#box-1">Show Box 1</a>
<a class="boxtoggler" href="#box-2">Show Box 2</a>
</div>
jQuery
$("a.boxtoggler").click(function() {
var boxId = $(this).attr("href");
$(boxId).show();
});
Note how we're abusing the fact that the fragment section of a URL is preceded by a # character to make it into a css ID ;)

Not sure I understood your question, but if you want to show the clicked box:
$('.show-box > a').click(function(){
$(this).parents('.show-box').show();
});