CODEWITHSUNDEEP
javascriptjqueryhtmlquery-string
Batfan
Batfan

Reputation: 8266

Jquery select first letter?

I am simply attempting to get jquery to identify the first letter of a paragraph. How would I do this?

For example, I have a page with a number of paragrahs on a page. I would like only the paragraphs starting with a specified letter to be given the class "current" and all others to be hidden. I pretty much know how to add the class and hide the others but, I cant get jquery to recognize the first letter.

Secondly, is it possible to pull this 'first letter' variable from the url string?

For example, Page 1 - There is a list of letters. The user clicks 'B' and the url is

http://domain.com/page2.html?letter=b

And page2 picks up that variable (b) and applies it to the Jquery, showing only those paragraphs

Upvotes: 17

Views: 38597

Answers (5)

foxybagga
foxybagga

Reputation: 4214

I don't know if its relevant here, but I am using this to style the first character.

$(".menu ul li.page_item a").each(function() {
var text = $(this).html();
var first = $('<span>'+text.charAt(0)+'</span>').addClass('caps');
$(this).html(text.substring(1)).prepend(first);
});

cheers!

Upvotes: 3

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

$('p').hide().filter(function(){return $(this).text().match(/^b/i);}).show();

or indented

$('p').hide()
      .filter(
              function(){
                         return $(this).text().match(/^b/i);
                        }
             )
      .show();

remove the i in the match if you want it to be case sensitive..

and you can look at http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html on how to get the url parameters..

Upvotes: 5

Aaron Butacov
Aaron Butacov

Reputation: 34347

Try:

jQuery('p').each(function(){     
    if(jQuery(this).text().substr(0,1).toUpperCase() == 'B'){
         jQuery(this).addClass('someclass')
    }
   })

You can use PHP to clean the variable and the print it in JS: 

<script type="text/javascript">
var letter = '<?php  echo (strlen($_GET['letter']) == 1) ? $_GET['letter'] : ''; ?>'
</script>

Or just grab it with document.location and extract it.

Upvotes: 25

BoltClock
BoltClock

Reputation: 723739

If you'd like to use JavaScript to grab the letter from the URL query string, run a regular expression on window.location.search:

var letterParam = window.location.search.match(/letter=([a-z])/i), letter;

if (letterParam)
{
    letter = letterParam[1];
}

To match paragraphs starting with that letter, use the charAt() method in JavaScript strings:

if (letter)
{
    $('p').each(function()
    {
        if ($(this).text().charAt(0).toUpperCase() == 'B')
        {
            // Apply the CSS class or change the style...
        }
    });
}

Upvotes: 12

John Rasch
John Rasch

Reputation: 63445

To hide the <p> tags whose text does not start with the letter B:

$('p').filter(function() {
  return $(this).text().charAt(0).toUpperCase() != 'B';
}).hide();

Upvotes: 8

Related Questions