JQuery Quick Tips – URL, QueryString and HTML Node Manipulation

If like me you’ve been asked to do things such as read node value information from one element and use it somewhere else then the following post will be right up your street.  I’ve listed a few common ones I’ve had to use a fair bit recently.  Take what you need;

1. Extract value from a HTML node

$('.classname').html();

Use “.html()” to get the contents of any element.

$('.classname').text();

This is slightly differently to .html(); because this can be used in both XML and HTML documents.

3. Get and Set URL for A HREF

var a_href = $('.classname').attr('href');
$('.classname').attr('href','http://www.returntoyouth.co.uk');

4. Limit the amount of displayed characters in a text node

$('.classname').each(function() {
    var $this = $(this);
    $this.text( $this.text().slice(0,50) );
});

5. Get and Set URL for A HREF as a callable function

var limitChars = function($elie, num) {
    var $this;
    $elie.each(function() {
        $this = $(this);
        $this.text( $this.text().slice(0,num) );
    });
}

Then call the function for whatever element you want;

limitChars($('.classname'), 50);

You’ll have to make sure that the variable is global if you are using this function in a larger JS file formulation, like Js compartmentalisation for example.

6. Get the page URL

Straight forward;

var url = document.URL;

7. Get the HASH (# or bookmark) parameter

This is how you get the “#” tag parameter from a URL.

var param = document.URL.split('#')[1];

8 . Check if element (<p> for example) is not empty

If like me you are working with dynamic content, say a CMS then this would be useful;

if ( $('.classname'+count).text().length > 0 ) {
    console.info('I have text');
}

9. URL Re-direction (Straight JavScript is best and quicker)

window.location.href = "http://www.i3lance.co.uk/";

You will have to put these into your ‘function()’ wrappers of course if you want to use it on a larger scale, but to play around with the above.

Alternatively, cut and paste it into your browser developer console window – just make sure the classname is updated to a class element on the page!

Leave a Reply

Your email address will not be published. Required fields are marked *