We Keep Coding

How to get nested DOM

How to get nested DOM.
I want to get the nested DOM by Jquery.
For example.
<div id="red">
<div id="member">A</div>
</div>
<div id="blue">
<div id="member">B</div>
</div>
<div id="yellow">
<div id="member">C</div>
</div>
Is it possible to get the each memver id like, yellow.member
I want to do like this.
$("#yellow.member").removeClass("myclass");

The way you wanted to access the child element of #yellow was real close to be correct.
$("#yellow .member").removeClass("myclass");
Notice the added space. The space means to look for another matching element in the descendant tree of the element matched by the previous selector.
Now it's your markup that is wrong. You just cannot use the same id more than once. The concept of id comes from long before the computer age... An "identification" is unique per definition!
Here is how your markup should look like... in a working example where the interval is just for fun:
$(document).ready(function(){
setInterval(function(){
$("#yellow .member").toggleClass("myclass");
},1000);
});
.myclass{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
<div class="member">A</div>
</div>
<div id="blue">
<div class="member">B</div>
</div>
<div id="yellow">
<div class="member">C</div>
</div>

You can use nested selectors with jQuery:
$('#yellow #member').removeClass('myclass');
Removes .myclass from the #member element inside #yellow.
Also, your HTML isn't valid. You can use an ID only once per document, so change all <div id="member"> ... </div> to <div class="member"> ... </div>. Then the selector passed to jQuery changes to
$('#yellow .member')

What you're after is the .find() method.
$("#yellow").find('#member').removeClass("myclass");
Or children()
$("#yellow").children('#member').removeClass("myclass");
or
$('#yellow>#member'),removeClass("myClass");
EDIT: Also don't have duplicate id's. Use class attribute instead.

How to slide down dynamic content using jQuery?

I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?

<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>

In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.

Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.

Get the height of an item inside last container

This should be pretty simple but I can't make it work. I need the height of an item that is inside the last item with a class.
HTML like so:
<div class="tag" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left" id="I need this height !"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
JavaScript poor attempt:
lastLeftHeight = $('.tag').last().$('.left').height();
I know that doesn't work. It's just to show what I'm trying to get .tag items can vary so I can't target a number or an ID.

try this ..
lastLeftHeight=$('.tag:last > .left').height();

you almost had it, but instead of using jquery methods, it can be accomplished with the proper query selector
$(.tag:last .left).height()
this will grab the last .tag element and find every child element with the class .left and return their heights
heres a fiddle demonstrating the selector in action:
http://jsfiddle.net/6e0s4jzj/

I would try some combination of using children(), filter(), and last() to get the height of a particular child div.
http://www.w3schools.com/jquery/jquery_traversing_filtering.asp
This explains a little more about traversing up and down the DOM using jQuery, and with examples that I would think would help.

Bootstrap ignore style modifications

I'm developing a simple webpage using Twitter Bootstrap.
At the sidebar I have 3 buttons. Each of this buttons calls a function to show one div and hide the others.
The HTML code is something like:
<div>
<div class="row" id="general" style="display:none">
Text1
</div>
<div class="row" id="medication" style="display:none">
Text2
</div>
<div class="row" id="diet" style="display:none">
Text3
</div>
</div>
And this is one of JS functions that hide/show the DIVs:
function showGeneral(){
document.getElementById('general').style.display = 'block';
document.getElementById('medication').style.display = 'none';
document.getElementById('diet').style.display = 'none';
}
I update the code with #ChaoticNadirs answer but still does not work.
Here is my code at Bootply
The problem is that the function works properly but once it finish all DIVs became hidden again (as default).
I feel the problem could be in any transition due to Twitter Bootstrap framework.
Does anyone how to solve this?

Bootstrap provides a .hidden class. You can use this rather than the display style to hide and show elements.
Check this bootply for an example: http://www.bootply.com/uY7kHe3Nw7
HTML:
<button class="btn btn-default" id="show-general">Show General</button>
<div>
<div class="row hidden" id="general">
Text1
</div>
<div class="row" id="medication">
Text2
</div>
<div class="row" id="diet">
Text3
</div>
</div>
JS:
$("#show-general").on('click', showGeneral);
function showGeneral(){
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
}
EDIT:
In your new example you are firing the event on a <div> click inside an <a> tag. You can do something like this to prevent the default action:
JS:
$('#showGeneral').on('click', showGeneral);
function showGeneral(e){
e.preventDefault();
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
$('#workout').addClass('hidden');
}
Here's a new bootply: http://www.bootply.com/3RkAbPX6d0

You might want to try using the "visibility" attribute... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility you can read more about it here.
Usually I apply a class to an element I would like to hide. This way it prevents using inline styles. If you don't care about inline styling you could also use jQuery's show(),hide(), or toogle() methods.
I do not think that the issue is with Bootstrap.

How to move the beginning and end tags of a HTML DOM element?

How can I change this:
<div class="container">
<div class="span-19">
<div id="content">
<!-- variable amount of content -->
<form class="move-me">
<!-- form -->
</form>
</div>
</div>
</div>
Into this:
<form class="move-me">
<div class="container">
<div class="span-19">
<div id="content">
<!-- variable amount of content -->
<!-- form data -->
</div>
</div>
</div>
</form>
Using jQuery? Note, I specifically want to move only the <form> start and end tags, not the children elements of that form. Preferably I want some jQuery.fn so that I can do this:
$('.move-me').changeNesting('.container');
Thanks in advance!

Use unwrap and wrap:
var toMove = $('.move-me'​);
toMove.​​​​​​children().unwrap()​;
$('.container'​).wrap(toMove);​
UPDATE: please note that the code above won't work if the form has nested raw text. You could wrap the form's children with another tag for it to work (also using end as pointed out by Yoshi in the comments):
$('.container').wrap(
$('.move-me').wrapInner('<div class="nostyle"/>').children().unwrap().end()
);​​​​

Using .wrap() and .detach() , like this:
$('.container').wrap( $('form.move-me').detach() );

$('.move-me').replaceWith(function() {
return $('*', this);
});
$('.container').wrap('<form class="move-me" />');​
demo http://jsfiddle.net/KX63Z/

var $form=$('form.move-me')
$form.replaceWith($form.html()));
$('.container').wrap('<form class="move-me">');