Jquery 选择第一个字母？

Question

我只是想让jquery识别段落的第一个字母。怎么做?

例如，我有一个页面上有多个段落。我只想给以特定字母开头的段落添加“current”类，其余段落则隐藏。我大致知道如何添加类并隐藏其他段落，但我无法让jquery识别第一个字母。

第二个问题，能否从URL字符串中获取“第一个字母”变量？

例如， 第一页-有一系列字母。用户点击'B'，url为

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

第二页将获取该变量(b)，并将其应用于Jquery，仅显示那些段落。

- Batfan

---

你会使用像PHP这样的服务器端语言来检索 $_GET['letter']，还是也想用jQuery来实现？ - BoltClock

对我来说真的没关系。我完全不反对使用一些PHP。 - Batfan

我更新了我的答案，以防您选择使用客户端代码处理它。 - BoltClock

Answer 1

尝试：

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获取它并提取。

- Aaron Butacov

---

移除 if。在三元运算符中不需要使用 if 关键字。 - BoltClock

是的，抱歉我有一个完整的if语句，只是随便拿了一下。@batfan，如果var letter在全局空间中定义（在函数外部），则可以通过使用if(jQuery(this).text().substr(0,1).toUpperCase() == letter){来访问该函数。 - Aaron Butacov

不过，你最好直接用 JS 抓取它。 - Aaron Butacov

@Aaron - 谢谢你。即使我改了那个，它还是不起作用，但是然后我尝试将字符串中的字母从'b'改为'B'，它就起作用了。它必须大写吗？另外，它只显示与此字母匹配的第一段落。如何让它显示所有匹配项？ - Batfan

这个问题发生的页面是实时的吗？另一种选择是在上面的代码中添加 }else{ jQuery(this).hide();}，以便一次性解决所有问题。这可能会消除任何冲突。 - Aaron Butacov

Answer 2

如果您想使用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...
        }
    });
}

- BoltClock

Answer 3

为了隐藏那些文本内容不以字母"B"开头的<p>标签：

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

- John Rasch

Answer 4

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

或者缩进

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

< p >如果您希望匹配区分大小写，请在匹配中删除< code >i。

您可以参考http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html学习如何获取URL参数。

- Gabriele Petrioli

---

如果您希望匹配不区分大小写，请从匹配中删除 i。 - Fluffy

Answer 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);
});

干杯！

- foxybagga

---

嘿，我刚刚用两个字符使它工作了，所以用 substr() 代替 charAt()，但这正是我所需要的。 - lharby