i have lots of <p>   </p> tags in the middle of description contents. i want to find and remove the tags containing only  . The description container has a class-name desc_container.
Here is the example of container,
<div class="desc_container">
<p> Some contents! <p>
<p>   </p>
<p> Again some contents! <p>
<p>   </p>
</div>
<script>
jQuery(document).ready(function(){
// This will give me all the <p> tags
$('.desc_container').find('p');
// This is what i want
$('.desc_container').find('p').containsOnly(' ');
}
</script>
Appreciate the help. Thanks!
You need to check the $(this).html().trim() === ' ' inside the loop for each <p> element and remove the <p> element. You can use browser's inspect element option in the below example for further verification.
$(document).ready(function(){
$('.desc_container p').each(function(){
if($(this).html().trim() === ' '){
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> This is a example </p> <p>   </p> for some content here <p> test data</p><p>   </p>
</div>
The :contains() selector selects elements containing the specified string. The following code will remove the <p> tag which contains   and might have other content too.
$("p:contains( )").remove();
If you want to remove the <p> which contain only   then you can loop <p> tag and remove whose value is  
$('p').each(function(){
if($(this).text().trim() == " "){
$(this).remove();
}
});
You don't need to use find since you can simply select all <p> tags inside the desc_container.
Just use the following selector: $('.desc_container p') or jQuery('.desc_container p') if you haven't mapped the jQuery object to $.
This will return you all the Nodes, which can be looped with jQuery's each method and then removed with .remove(). Also, make sure to trim the string before comparing.
$(document).ready(function(){
$('.desc_container p').each(function() {
if($(this).html().trim() === ' '){
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p>Text</p> <p>   </p><p>Text</p><p>   </p>
</div>
You can try following
$(document).ready(function(){
$(".desc_container p").each(function(){
if($(this).text().trim() == "") {
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> Some contents! <p>
<p>   </p>
<p> Again some contents! <p>
<p>   </p>
</div>
$("#deleteEmpty").on('click', function() {
$(".desc_container p").each(function(index, element) {
var $element = $(element);
if ($element.html().trim() === " ") {
$element.remove();
}
});
});
.desc_container p {
padding: 5px 8px;
background-color: #EEE;
margin: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> </p>
<p>Sample text here</p>
<p> </p>
<p>Sample text here</p>
<p> </p>
<p>Sample text here</p>
<p>Sample text here</p>
<p>Sample text here</p>
<p> </p>
<p></p>
<p>Sample text here</p>
</div>
<button id="deleteEmpty">Delete empty `p` tags</button>
Related
I'm trying to add a class when a specific div goes to the top but jquery add the class to all divs with the same class, and I just wanna select the div which is on the top at the moment
Jquery code
let bannerTop = $('.travel__banner').offset().top,
banner = $('.travel__banner')
$(window).scroll(function() {
if ( $(this).scrollTop() >= bannerTop ) {
banner.addClass('is-active');
} else {
banner.removeClass('is-active');
}
});
Html code
<div class="travel">
<div class="travel__banner">
<h2 class="travel__banner__title" > title 1</h2>
</div>
</div>
<div class="travel">
<div class="travel__banner">
<h2 class="travel__banner__title" > title 2</h2>
</div>
</div>
<div class="travel">
<div class="travel__banner">
<h2 class="travel__banner__title" > title 3</h2>
</div>
</div>
</main>
I expect that when the div with the class "travel__banner" goes to the top, this div add the class "is-active" and when I keeping scrolling the next div with the class "travel__banner" add the class "is-active" and the previous div remove the class "is-active"
You need to run through each element. JQuery has a useful method for that which is calld each().
// your element
banner = $('.travel__banner'); // your element
// your scroll event
$(window).scroll(function() {
// assign the scrollTop of the window to a var
var scrollTop = $(this).scrollTop();
// run through each banner element
banner.each(function(){
// get the top position of the current banner element and assign it to a var
var bannerTop = $(this).offset().top
if ( scrollTop >= bannerTop ) {
// here you add your class
$(this).addClass('is-active');
banner.not($(this)).removeClass('is-active');
} else {
// and here you remove it
$(this).removeClass('is-active');
}
});
});
Here is a working example example:
banner = $('.travel__banner')
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
banner.each(function(){
var bannerTop = $(this).offset().top
if ( scrollTop >= bannerTop ) {
$(this).addClass('is-active');
banner.not($(this)).removeClass('is-active');
} else {
$(this).removeClass('is-active');
}
});
});
.travel__banner{
box-shadow:0px 3px 9px rgba(0,0,0,0.12);
padding:16px;
}
.travel__banner.is-active{
color:red;
}
.travel__banner.is-active:before{
content: "(is active) "
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="travel__banner">
My Banner
</div>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<div class="travel__banner">
My Banner
</div>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
<p>
Paragraph in between
</p>
</div>
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've multiple <p> on my page. They do not have classes or ids.
What I'm trying to achieve is to be able to target every single of these <p>s count how many hashtags are in there and display the result inside the <span>.
structure example:
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
this is working but it's counting everything:
$(function() {
var text = $(this).find("pre").text();
var hashTags = text.split("#").length;
var result = hashTags - 1;
$('#output').html('words count: ' + result);
});
You can try below code:
//loop through every element with class parent
$(".parent").each( function(index) {
//get number of tags per in <p>
var tags = $(this).find("p").text().split("#").length - 1;
//write the number of tags in <span>
$(this).find("span").text(tags);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
<div class="parent">
<p>
#test #test #test
</p>
<span></span>
</div>
You are using a wrong selector, replace it with:
var text = $(this).find("p").text();
Note also that in the code you posted there's no output div.
Check this pen for a working version.
This Toggle on a mouseover event works fine:
jQuery(document).ready(function(){
jQuery(".info").hide();
jQuery(".trigger").mouseout(function(){
jQuery(".info").slideUp(200);
});
jQuery(".trigger").mouseover(function(){
jQuery(".info").slideToggle();
});
});
but have too many objects so if i trigger some trigger, it shows me all areas with the info class. The easiest way would be adding an ID :
<div class="trigger" id="1">Details</div>
<div class=" info" id="1">
<p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum one. </p>
</div>
<div class="trigger" id="2">Details</div>
<div class=" info" id="2">
<p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum two. </p>
</div>
So the trigger is only triggering the info to witch its belongs.
I'm not very into jQuery, so my question is how do I get this id matching the js code?
Inside the callbacks, refer to the object called with this:
jQuery(document).ready(function(){
jQuery(".info").hide();
jQuery(".trigger").mouseout(function(){
jQuery(this).slideUp(200);
});
jQuery(".trigger").mouseover(function(){
jQuery(this).slideToggle();
});
});
Use this in handler function which refers to Element over which event is invoked!
jQueryObject.next([SELECTOR]) will select immediate sibling element of the current element.
Note: Remove Duplicate IDs from document as, There must not be multiple elements in a document that have the same id value.
jQuery(document).ready(function() {
jQuery(".info").hide();
jQuery(".trigger").mouseout(function() {
jQuery(this).next(".info").slideUp(200);
});
jQuery(".trigger").mouseover(function() {
jQuery(this).next(".info").slideDown(200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="trigger">Details</div>
<div class=" info">
<p> <b> Projektbeschreibung </b>
</p>
<p>Lorem ipsum one.</p>
</div>
<div class="trigger">Details</div>
<div class=" info">
<p> <b> Projektbeschreibung </b>
</p>
<p>Lorem ipsum two.</p>
</div>
jQuery(document).ready(function(){
jQuery(".trigger").hover(function() {
$('#' + $(this).attr('data-target')).stop(true).slideToggle();
});
});
.info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="trigger" data-target="item-1">Details</div>
<div class=" info" id="item-1"><p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum one. </p>
</div>
<div class="trigger" data-target="item-2">Details</div>
<div class=" info" id="item-2"><p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum two. </p>
</div>
#Jonathan it's easy to do with JQuery.
in your JQuery function you just need make some tweaks to get the ID and perform the function as expected.
jQuery(document).ready(function(){
jQuery(".info").hide();
jQuery(".trigger").mouseout(function(){
var elem_id = $(this).attr('id');
jQuery(".info#"+elem_id).slideUp(200);
});
jQuery(".trigger").mouseover(function(){
var elem_id = $(this).attr('id');
jQuery(".info#"+elem_id").slideToggle();
});
});
Try above code.
<div>
<p>
<img>
</p>
<p></p>
<p></p>
</div>
How to remove the first <p></p> but not the childs (img)?
you can use .unwrap()
to unwrap the first p you have to specify the select as first() p also
$("p").first().contents().unwrap()
Working Demo:
$("p").first().contents().unwrap()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>
<img>
</p>
<p>aaa
</p>
<p>
</p>
</div>