<div class="full_widget">
<div class="connect_top clearfix">
</div>
<div id="stream_content" class="page_stream_short">
</div>
<div class="connections">
</div>
</div>
what i whant to do is to move connections class in the first place juste after
<div class="full_widget">
just like this :
<div class="full_widget">
<div class="connections">
</div>
<div class="connect_top clearfix">
</div>
<div id="stream_content" class="page_stream_short">
</div>
</div>
thanks
$(".connections").prependTo(".full_widget");
This will always move .connections to the inner top of .full_widget.
$(".connections").insertBefore(".connect_top");
If you added in another element to the top, using insertBefore() will insure it's displayed right above .connect_top, instead of moving it directly to the top.
If you have more than one of those, simply do:
$(".connections").prepend(function() {
var ele = $(this);
ele.prependTo(ele.parent());
});
You can use the jquery prepend function:
$('.full_widget').prepend( $('.connections') );
$('.full_widget').prepend($('.connections'));
Related
I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");
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 have a container div with two divs inside of it, like such:
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
I have wrapped another div around 'child1' and 'child2' but it's appearing twice which I haven't been able to fix:
$(".child1, .child2").wrapAll('<div class="style"></div>');
Which is rendering out as the following:
<div class="container">
<div class="style">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
</div>
But what I actually want is the following:
<div class="container">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
How do I go about fixing this? I have tried numerous other methods of trying to sort the double-append.
EDIT: The issue was jquery was firing twice, I moved the code out of the existing file and into a new file. Once I did this the answers below all worked.
Try:
$(".container > div").wrapAll('<div class="style"></div>');
Change you markup little bit, (just add common class)
<div class="container">
<div class="child1 child"></div>
<div class="child2 child"></div>
</div>
now use below code:
$( ".child" ).wrapAll( "<div class='style' />");
$(".child1").next().andSelf().wrapAll("<div class='style'/>");
Try it...
I ran this in fiddle and it seems to work fine... ??????
You can do this though...
$(".container").each(function() {
var ch1 = $(this).find('.child1');
var ch2 = $(this).find('.child2');
var st = $('<div class="style">');
st.append(ch1);
st.append(ch2);
$(this).html('').append(st);
});
I have this HTML
<div id="main-container">
<div style="style-here" data-status="active" data-state="loaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="active" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="inactive" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
</div>
On click on one of the elements that has {{click_event}} I want to search recursively till I can find an element that has data-status or data-state, and in the worst case when I meet the id from top to stop de search.
The HTML is made generated from another JS file and I can't change the way is made it. Is there a way with closest or parent from jQuery to search after data attribute?
Thank you.
No need for recursion, you can use closest():
$clickedElement.click(function() {
var $parent = $(this).closest('[data-status], [data-state], #main-container');
});
I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?
If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');
getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>
Can you use jQuery?
It would be as easy as this