CODEWITHSUNDEEP
jquery
Brandon Lebedev
Brandon Lebedev

Reputation: 2797

Can I chain this jQuery?

Is it possible to shorten these jQuery snippets by chaining them together? For the second chain, I'd like to get rid of the w class if possible.

$('#content').prepend("<h1 />");
$('#content h1').append( $('#content>p:first strong').html() );
$('#content>p:first strong').parent().remove();

$('font').wrapInner('<p class="w"/>');
$("p.w").unwrap().unwrap();

Edit: Let me clarify my second jQuery snippet. I'm cleaning up old HTML markup that looks like this:

<div id="content">
    <p>
        <font>
            <b>Sample Title</b>
            <br>
            More sample text.
        </font>
    </p>
</div>

And changing it to this:

<div id="content">
    <p>
        <b>Sample Title</b>
        <br>
        More sample text.
    </p>
</div>

Upvotes: 0

Views: 418

Answers (5)

Šime Vidas
Šime Vidas

Reputation: 186103

This is how I would do it:

var content = $( '#content' )[0];
var para1 = $( content ).children( 'p' )[0];
var text = $( para1 ).children( 'strong' ).text();

$( '<h1>', { text: text }).prependTo( content );
$( para1 ).remove();

As of jQuery 1.4, the second argument to jQuery() can accept a map consisting of a superset of the properties that can be passed to the .attr() method. Furthermore, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset. The name "class" must be quoted in the map since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.

From the docs: http://api.jquery.com/jQuery/#jQuery2

So, you can pass an object literal as the second argument. That object literal "initializes" the newly created DOM element (the H1 element in our case).

Upvotes: 1

MCSI
MCSI

Reputation: 2904

To cut down processing, you can chain, but it's better to cash the variables (is more readeable).

You can do:

var content = $('#content'),
    firstP = $('#content>p:first strong');

content.prepend("<h1 />").find("h1").append( firstP.html() );
firstP.parent().remove();

good luck!

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this.

$('#content')
.prepend("<h1 />");
.find('h1').append( $('#content>p:first strong').html() )
.end()
.find('>p:first strong').parent().remove();

$('font').wrapInner('<p class="w"/>');
$("p.w").unwrap().unwrap();

.end() ends the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

Upvotes: 0

FMaz008
FMaz008

Reputation: 11295

I don't think that you'll cut down on processing time by simply chaining that code. The Rafael.IT answer is good, but I don't think it will help improve the code performance.

Upvotes: 0

isJustMe
isJustMe

Reputation: 5470

the thing about your code is that you are targeting different selectors, that's why you would have to modify your selectors, take a look to end() that will destroy the last selection filter and you modify your selector

Upvotes: 1

Related Questions