I am trying to wrap both a h1 tag and multiple p tags into one div using jQuery wrapAll.
Here is my HTML:
<h1>Title</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<div class="img"></div>
And my jQuery:
$('h1').wrapAll('<div class="first-col" />');
$('.img').wrapAll('<div class="second-col" />');
And a JSFIDDLE.
At the moment, I can only wrap around the h1 tag, or both the h1 and p tags separately. I want them both in the one first-col div.
Does anyone know how to do this?
Try
$('h1').nextUntil('div.img').addBack().wrapAll('<div class="first-col" />');
Demo: Fiddle
Have you tried to just add p inside the selector:
$('.postwrap').each(function(){
$(this).find('h1, p').wrapAll('<div class="first-col" />');
$(this).find('.img').wrapAll('<div class="second-col" />');
});
Related
The jQuery below detects the word first and third in any <p> text and adds a yellow or red background to it.
$(document).ready(function(){
$("p:contains(first)").css("background-color", "yellow");
$("p:contains(third)").css("background-color", "red");
});
<p>I'm the first sentence.</p>
<p>I'm the second sentence.</p>
<p>I'm the third sentence.</p>
<p>I'm the fourth sentence.</p>
JSFiddle: https://jsfiddle.net/3p0nmw4f/1/
However, instead of highlighting the text, I want to addClass to the body of the html document like this :
<body class="first">
or
<body class="third">
I know we can achieve this using $(document.body).addClass('first'); but I'm unable to put it together.
Please help.
You could search for the closest body HTML element.
You can do this by doing the following:
$(document).ready(function(){
$("p:contains(first)").closest('body').addClass('first');
$("p:contains(third)").closest('body').addClass('third');
});
Another possibility would be to simply search for the body element as follows:
$(document).ready(function(){
if ($("p:contains(first)"))
$("body").addClass("first")
if ($("p:contains(third)"))
$("body").addClass("third")
});
Source: https://jsfiddle.net/fk05dabw/
I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.
I've tried giving the h3 tag a class, then the following:
$('h3.myclass').parent().closest('h1').css('display','none);
and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.
Can anyone help me out?
EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!
Use closest() to traverse up to the grandparent
Use find() to select the desired elements
You can use hide() in place of css('display', 'none') as they are equivalent
var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3 class="myclass">Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I can think of two selectors that might work assuming you put .myclass back in.
$('.myclass').closest('.grandparent').find('h1').css('display','none');
or
$('.myclass').parent().siblings('h1').css('display','none');
have direct control over which is the h3
Try utilizing .parent() , .siblings()
$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
You may use:
$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();
> is for direct descendant element.
closest() selects ancestors, what you want is siblings().
So:
$('.your_h3_class').parent().siblings('h1')
will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.
And you can iterate through those and hide them (in case there is ever more than one)
If the title is always immediately before the div with the "otherstuff" class, then you could use this:
$('.otherstuff').prev('h1').css('display', 'none');
Documentation here: https://api.jquery.com/prev/
What I want is to wrap all my p tags in a special div having a class p_wrapper. I want something like this:(For all elements not only for p and div)
$('p').wrappAll('.p_wrapper')
I should get this HTML:
Before
<p>This is a paragraph!</p>
<p>This is another paragraph!</p>
After
<div class="p_wrapper"> <p>This is a paragraph!</p> </div>
<div class="p_wrapper"> <p>This is another paragraph!</p> </div>
$("p").wrap($("<div/>").addClass("p_wrapper"));
http://jsfiddle.net/aXwDs/1/
$('p').wrap('<div class="p_wrapper"></div>');
This should work :
$('p').wrap('<div class="p_wrapper">');
I'm trying to append the first paragraph in every .post within .index
http://jsfiddle.net/syehC/
<div class="index">
<div class="post">
<p>append me!</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div class="post">
<p>append me!</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div class="post">
<p>append me!</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
<div class="single">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
And I have tried both of the following:
$('.index .post p:first').append('...');
$('.index .post p:first').each(function () {
$(this).append('...');
});
But they only seem to get the first paragraph in the document, not the first of each post.
Would anyone know a solution, and explain why this isn't working?
You need to use :first-child instead of :first
$('.index .post p:first-child').each(function () {
$(this).append('...');
});
:first matches only a single element, the :first-child selector can match more than one: one for each parent.
Js Fiddle Demo
JSFIDDLE
Find all the elements which match .index .post and for each element find the first paragraph and append to it:
$('.index .post').each( function(){
$( 'p:first', this ).append( '...' );
} );
A version with a single selector is:
$('.index .post p:first-child').append('...');
The :first pseudo-class only matches a single element (the first in the DOM hierarchy).
The :first-child finds the first match for each of its parents.
I would try something like:
$('.index .post').each(function(){
$(this).find('p:first').append('my text to append');
});
If you try to select by jquery in console you'll see that you only have the first paragraph on the returned array, because you're are filtering it.
You can do it this way, i think it is more readable. You do an each over all .post and for each one you will find the first paragraph on it and append '...'
$('.index .post').each(function(){
$(this).find('p:first').append('...');
})
My answer is a variant of the answer #Sachin provided.
You should use the :first-of-type pseudo-class. This way, even if the first child of .post is a <div>, it will still select the first <p> element.
$('.index .post p:first-of-type').each(function () {
$(this).append('...');
});
Here's a working demo: http://jsfiddle.net/KTj42/1/
Read more about :first-of-type at CSS Tricks.
I have a weird page with a HTML tag inside another HTML tag, (I know... but it's beyond my control), I try to select the element inside the inner one with jQuery but no luck. Seems like jQuery won't go across second HTML tag?
For example
<HTML>
<Body>
<div id="foo">
<iframe>
<HTML>
<Body>
<div>
^^^^ select this div ^^^^
</div>
</Body>
</HTML>
</iframe>
</div>
</Body>
</HTML>
I could not select the div (with bar in it) with
$('#foo>iframe>HTML>Body>div')
Any input will be greatly appreciated!
Thanks
I would just use this selector:
$('#foo div p');
Example
Ok the question was updated, so my previous answer was invalid.
First - Sort out your HTML markup, it is invalid. This is the correct structure for the HTML:
<body>
<div id="foo">
<div>
<p> bar </p>
</div>
</div>
</body>
The jquery to select the div with "bar" inside it is:
$('#foo > div > p ').html(); // Returns "bar"
Check this JSFiddle for more info & example: JSFiddle : http://jsfiddle.net/nnysu/