I would like to hide all other element except class="imagebrowser" in following,
<div class="entry">
<p>Heading 1</p>
<p>Heading 2</p>
...
<p>Heading n</p>
<b>This is abold text</b>
<div>This is a div element</div>
<div class="imagebrowser">
Hello world
</div>
</div>
Expected result,
<div class="entry">
<div class="imagebrowser">
Hello world
</div>
</div>
Any help please
Try this
$(".entry").children(":not(.imagebrowser)").hide();
$('div.entry div').not('.imagebrowser').hide();
This will hide all divs inside the "entry" div other than those with the class "imagebrowser".
Have you tried:
$('.entry').children().hide();
$('.imagebrowser').show();
This should hide all the contents of the entry div, including the p tags, and then show the imagebrowser div afterwards.
This code worked for me. You can replace $(this).val() with #target
$('.'+ $(this).val()).show(); $('.tabcontent2 tr:not(.'+ $(this).val() +')').hide();
Related
I am trying to wrap content in a div but the problem is the html page is not editable so I am trying other way, using jQuery to wrap all the content in a div following is the html structure
$(document).ready(function() {
$("hr").before("<div class=wrapElement>");
$("#disqus_thread").before("</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
Problem opening div is placed on correct position, but closing div is not on correct position, it should be above div id="disqus_thread" but its not there, how do I get it placed on this position?
jQuery version is 1.12.4
thanks in advance
Use nextUntil() method to get all elements upto the div and use wrapAll() method to wrap them using a div element.
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread") // get elements from hr upto the previous element of #disqus_thread
.wrapAll("<div class=wrapElement></div>"); // wrap all elements using div
});
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread").wrapAll("<div class=wrapElement></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
Or, you can just use built-in jQuery functions:
Here's a fiddle: https://jsfiddle.net/uhr4kuk6/5/
$(document).ready(function() {
$('hr').remove();
$('h4').wrap('<div class="wrapElement">').prepend('<hr>');
$('p').each(function() {
var getContentWithTags = $(this).clone();
$('.wrapElement').append(getContentWithTags);
$(this).remove();
})
});
.wrapElement {
background: red;
padding-top: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="disqus_thread"></div>
If you have a container you can use jQuery wrapInner() method, easly :
$( "body" ).wrapInner( "<div class='wrapElement'></div>");
Suppose your content is inside the body tag:
var mainhtml= $('body').find('*').not('#thread_content').html()
$('#thread_content').html(mainhtml);
Try this..
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
$(document).ready(function() {
$("body").wrapInner("<div class=wrapElement></div>");
});
I would like to move several divs up the DOM with jQuery.
<section>
<div class="title"></div>
<div class="temps"></div>
<div class="list"></div>
</section>
I would like to move all the .list divs after the .title div. How can I do this with jQuery.
This $('.temps').insertAfter('.title'); does not work, it places all the .list after the first .title
I would like to move all the .list divs after the .title div.
You can use each method like this:
$('.list').each(function(){
$(this).insertAfter(
$(this) //.list div
.closest('section') //find parent div section
.find('.title') //find child div
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
<section>
<div class="title">title</div>
<div class="temps">temps</div>
<div class="list">list</div>
</section>
simply try this, demo
$('.list').insertAfter($('.title'));
or
$('.list').insertAfter('.title'); //only selector no object
Try this
$('.list').each(function(){
$(this).prevAll('.title').after($(this));
});
I wouldn't of been anble to get this working without #Bhojendra Nepal help in his answer above, and while his solution worked in his code snippit it did not work on my application. In the end the below worked for me.
jQuery('.list').each(function(){
jQuery(this).insertAfter(jQuery(this).parent().find('.title'));
});
Let's say I have the following.
<div class="foo">
<div>
some text
<div class="bar">
</div>
</div>
</div>
<div class="foo">
<div>
some text
<div class="bar">
some text
</div>
</div>
</div>
I want return all the divs of class "foo" that have "some text" inside the div class "bar." So the second would be returned, but not the second. How can I do that?
Try this
$("div.bar:contains('some text')").parents(".foo")
This will do it
$('.foo:has(.bar:not(:empty))')
Make sure there are no characters inside the .bar, even spaces or newlines.
http://jsfiddle.net/Nk4FB/
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;
With the example below, I'd like to select the contents of the < h3 > tags for each block, and move them inside the 'title' divs (without the h3 tags). Is this possible?
<div id="block1">
<div class="title">
</div>
<div class="content">
<h3>Title 1</h3>
</div>
</div>
<div id="block2">
<div class="title">
</div>
<div class="content">
<h3>Title 2</h3>
</div>
</div>
Online demo: http://jsbin.com/ezuxo
// Cycle through each <div class="content"></div>
$(".content").each(function(){
// Find its first h3 tag, and remove it
var heading = $("h3", this).remove();
// Set the text of the h3 tag to the value of the previous div (.title)
$(this).prev().html($(heading).html());
});
First off, I'd assign a class to the "blocks", let's call it "block" for now. Then do this:
$(".block").each(function() {
$(".title", this).html($(".content h3", this).html());
}