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">');
Related
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/
Does the .tagName property work for immediate elements? I have been getting it to work using child elements as a jump-off point, but I can't get it to work on immediate elements.
Here is an example that works:
HTML
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div>
<p id="foo">This is paragraph 5.</p>
</div>
JavaScript
(function(){
var el = document.getElementById("foo");
var name = el.parentNode.tagName;
alert(name);
}());
This gets me the name of the div element and this is what I want to achieve, but is there a shorter way?
I don't want to add an identifier to the element and target it that way, this is because I don't want to add unnecessary mark-up to my HTML document. Here is an example that works, but relies on an identifier.
HTML
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div id="bar">
<p id="foo">This is paragraph 5.</p>
</div>
JavaScript
(function(){
var el = document.getElementById("bar");
var name = el.tagName;
alert(name);
}());
As you see this get's the desired effect, but relies on an identifier. So I thought: "Can't I use the .tagName property on the element itself and target the element with .getElementsByTagName()?"
HTML
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div>
<p id="foo">This is paragraph 5.</p>
</div>
JavaScript
(function(){
var el = document.getElementsByTagName("div");
var name = el.tagName;
alert(name);
}());
The answer is no. This get's me a value of undefined. Why is this? Anyone have a solution?
Link to jsFiddle: http://jsfiddle.net/BV5EP/
Keep in mind that getElementsbyTagName (notice the plural s) returns a nodeList instead of an Element (like getElementById does). You need to make sure to use el[0].tagName!
Corrected Fiddle
This get's me a value of undefined. Why is this?
Because the NodeList that getElementsByTagName returns has no tagname property.
Anyone have a solution?
You have to access the elements that the NodeList contains by index – el[0].tagName in this case, if you only want to access the first (or only) div element.
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" />');
});
I use jQuery most of the time, so I am having a bit of trouble with the following (simple) javascript:
I want to dismiss(hide) the parent element of a p tag when clicking on it:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss();">dismiss this box</p>
</div>
JS:
function dismiss(){
document.getElementById('dismiss').pDoc.parentNode.style.display='none';
};
Fiddle: http://jsfiddle.net/CUqmn/3/
But this is not working. What would be the correct code?
Thanks
http://jsfiddle.net/CUqmn/4/
function dismiss(){
document.getElementById('dismiss').parentNode.style.display='none';
};
BTW, as jsfiddle wrap javascript code in loader function, use no wrap in left select box to get it work on jsfiddle.
<div class="parent">
<p id="dismiss" onclick="dismiss(this);">dismiss this box</p>
</div>
function dismiss(el){
el.parentNode.style.display='none';
};
You could try:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>
JS:
function dismiss(delete){
delete.style.display='none';
};
This will delete the parent element. Also I just recently found out that you can hide the parent of a parent element like this:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>
JS:
function dismiss(delete){
delete.parentNode.style.display='none';
};
Not relevant to this but if you ever want to try it it's there.
Sorry for my really late reply. 2 years later lol.
I'm creating a shortcut for a blog theme where I want to generate a div container around elements after using a cue word. For example, my blog entry would like this:
<div class="entry">
<p>First Paragraph</p>
<p>[box]</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</div> <!-- .entry -->
I'm hoping with some jQuery magic it could turn into this:
<div class="entry">
<p>First Paragraph</p>
<div class="box">
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</div> <!-- .box -->
</div> <!-- .entry -->
One more rule: When I create a container box, I know I will always generate it before the closing div.entry. I'm hoping this restriction will make it easier to write the rules for jQuery. For example, I will never want the markup to look like this where there is content proceeding the div.box container:
<!-- I will never mark it up this way -->
<div class="entry">
<p>First Paragraph</p>
<div class="box">
<p>Second Paragraph</p>
</div> <!-- .box -->
<p>Third paragraph</p>
</div> <!-- .entry -->
I think your best bet is the jQuery :contains() selector.
With it you could do things like this (note: it matches any paragraph that has [box] in its HTML and maybe you need to escape the brackets):
$("p:contains('[box]')").wrap($('<div>').addClass('box'));
And btw. accepting answers and proving that you already put effort in your
problem will make it much more likely to get a helpful reply.
It will be something like this:
$("div.entry").append(
$("<div>").addClass("box").append("p:contains([box])+*");
);
$("p:contains([box])").remove();
See an example of the following here.
You can find the index() of the [box] paragraph and then wrapAll() the <p> after using :gt() to get all the parapgraphs following it:
var boxAt;
$('p').each(function(){
var $t = $(this);
if ($t.html() === '[box]') {
boxAt = $t.index();
$t.remove();
}
});
$('p:gt(' + (boxAt - 1) + ')').wrapAll('<div class="box">');
Thanks everyone for your help! It helped me also come up with another strategy that worked for me as well:
$('.entry p:contains([box])').each( function() {
$(this).prevAll().wrapAll('<div class="lefty">');
});
$('.entry p:contains([box])').each( function() {
$(this).nextAll().wrapAll('<div class="righty">');
});
$("p:contains([box])").remove();
What this does is create two separate boxes: 1. elements preceding [box], 2. elements proceeding [box]