-
width( ) returns Integer
Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.Example:
Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.
function showWidth(ele, w) { $("div").text("The width for the " + ele + " is " + w + "px."); } $("#getp").click(function () { showWidth("paragraph", $("p").width()); }); $("#getd").click(function () { showWidth("document", $(document).width()); }); $("#getw").click(function () { showWidth("window", $(window).width()); });HTML:
<button id="getp">Get Paragraph Width</button> <button id="getd">Get Document Width</button> <button id="getw">Get Window Width</button> <div> </div> <p> Sample paragraph to test width </p> -
width( String, Number val ) returns jQuery
Set the CSS width of every matched element.
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.Example:
To set the width of each div on click to 30px plus a color change.
$("div").one('click', function () { $(this).width(30) .css({cursor:"auto", "background-color":"blue"}); });HTML:
<div></div> <div></div> <div></div> <div></div> <div></div> -
wrap( String html ) returns jQuery
Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.Example:
Wraps a newly created div around all paragraphs.
$("p").wrap("<div class='wrap'></div>");HTML:
<p>Test Paragraph.</p>Example:
Wraps a newly created tree of objects around each span.
$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");HTML:
<span>Span Text</span> <span>Another One</span> -
wrap( Element elem ) returns jQuery
Wrap all matched elements with a structure of other elements.
Example:
Wraps an element with id of "content" around all paragraphs.
$("p").wrap(document.getElementById('content'));HTML:
<p>Test Paragraph.</p><div id="content"></div>Example:
Wraps a jQuery object (in this case a div) around all paragraphs.
$("p").wrap($("<div>"));HTML:
<p>Test Paragraph.</p> <p>Another Paragraph.</p> -
wrapAll( String html ) returns jQuery
Wrap all the elements in the matched set into a single wrapper element.
This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.Example:
Wrap a new div around all of the paragraphs.
$("p").wrapAll("<div></div>");HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");HTML:
<span>Span Text</span> <strong>What about me?</strong> <span>Another One</span> -
wrapAll( Element elem ) returns jQuery
Wrap all the elements in the matched set into a single wrapper element.
This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element.Example:
Wrap a new div around all of the paragraphs.
$("p").wrapAll(document.createElement("div"));HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
$("p").wrapAll($(".doublediv"));HTML:
<p>Hello</p> <p>cruel</p> <p>World</p> <div class="doublediv"><div></div></div> -
wrapInner( String html ) returns jQuery
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.Example:
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner("<b></b>");HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
Wraps a newly created tree of objects around the inside of the body.
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");HTML:
Plain old text, or is it? -
wrapInner( Element elem ) returns jQuery
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Example:
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner(document.createElement("b"));HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>Example:
Selects all paragraphs and wraps a jQuery object around each of its contents.
$("p").wrapInner($("<span class='red'></span>"));HTML:
<p>Hello</p> <p>cruel</p> <p>World</p>