web-dev-qa-db-ja.com

Jqueryは最初の文字を選択しますか?

段落の最初の文字を識別するためにjqueryを取得しようとしているだけです。どうすればよいですか?

たとえば、1ページに多数のパラグラがあるページがあります。指定された文字で始まる段落のみに「現在」のクラスを与え、他のすべての段落は非表示にします。クラスを追加して他のクラスを非表示にする方法はほとんど知っていますが、jqueryに最初の文字を認識させることができません。

次に、この「最初の文字」変数をURL文字列から取得することは可能ですか?

たとえば、ページ1-文字のリストがあります。ユーザーが「B」をクリックすると、URLは

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

そして、page2はその変数(b)を取得し、それをJqueryに適用して、それらの段落のみを表示します。

16
Batfan

試してください:

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

PHPを使用して、変数をクリーンアップし、JSで出力できます。

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

または、document.locationで取得して抽出します。

22
Aaron Harun

JavaScriptを使用してURLクエリ文字列からletterを取得する場合は、_window.location.search_で正規表現を実行します。

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

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

その文字で始まる段落を照合するには、JavaScript文字列でcharAt()メソッドを使用します。

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

テキストが文字Bで始まらない<p>タグを非表示にするには:

$('p').filter(function() {
  return $(this).text().charAt(0).toUpperCase() != 'B';
}).hide();
8
John Rasch
$('p').hide().filter(function(){return $(this).text().match(/^b/i);}).show();

またはインデント

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

大文字と小文字を区別する場合は、一致するiを削除します。

そして、URLパラメータを取得する方法について http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html を見ることができます。

5

ここで関連性があるかどうかはわかりませんが、これを使用して最初の文字のスタイルを設定しています。

$(".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);
});

乾杯!

3
foxybagga