时间戳

首页 > 解决方案 > 大写块引用的第一个字母时遇到问题

javascript - 大写块引用的第一个字母时遇到问题

问题描述

$(document).ready(function() {

    $("span").wrapInner("<blockquote><q></q></blockquote");
    
    $("blockquote").css("border-top", "1px solid grey");
    $("blockquote").css("border-bottom", "1px solid grey");
    $("blockquote").css("padding", "5px 0 5px 0");
    $("blockquote").css("font-size", "15px");
    

    
        
}); // end ready
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Get going fast</h2>
        <p>In just the first 6 chapters of this book, you'll learn more about web development than 
        you can from most full books.</p>
        <p>It's true! In fact, <span>by the end of the crash course in 
        Section 1, you'll be developing web pages the way today's best professionals do.</span>
        That means you'll be using HTML5 semantic elements to mark up the structure of the 
        content on the page and CSS to format and lay out that content.</p>

我找到了如何将字符串中的第一个字母大写的解决方案，但我认为我没有正确实现它。我收到一条错误消息，提示“blockquote.substr 不是函数”。这是我的jQuery：

$(document).ready(function() {

$("span").wrapInner("<blockquote><q></q></blockquote");

$("blockquote").css("border-top", "1px solid grey");
$("blockquote").css("border-bottom", "1px solid grey");
$("blockquote").css("padding", "5px 0 5px 0");
$("blockquote").css("font-size", "15px");

var blockquote = $("blockquote");
blockquote.substr(0,1).toUpperCase() + blockquote.substr(1);

    
}); // end ready

标签： javascriptjquerystring

解决方案

好吧，您需要使用jQuery中的text()或vanilla javascript中的textContent

例子：

$(document).ready(function() {
  const blockquote = $("blockquote"); // yep, i like using this
  const text = blockquote.text()
    .trim(); // do u need new lines? nope...

  blockquote.css({ // u can using object to pass all css styles
    "border-top": "1px solid grey",
    "border-bottom": "1px solid grey",
    "padding": "5px 0 5px 0",
    "font-size": "15px"
  });
  blockquote.text(text.charAt(0).toUpperCase() + text.substr(1));
}); // end ready
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <blockquote>
    hello wolrd
    </blockquote>
  </body>
</html>

如果您想将所有单词大写：

// create a function to capitalize some word
const capitalize = value => value.charAt(0).toUpperCase() + value.substr(1);

// split into array based on spaces, and capitalize all words to finally join to make a full capitalized string
blockquote.text(text.split(' ').map(i => capitalize(i)).join(' '))

如果您有多个带有 te 选择器的项目，会发生什么？你可以each这样使用：

    $(document).ready(function() {
      const blockquote = $("blockquote"); // yep, i like using this
      
      blockquote.each((index, element) => {
        const text = $(element).text()
          .trim(); // do u need new lines? nope...

        $(element).css({ // u can using object to pass all css styles
          "border-top": "1px solid grey",
          "border-bottom": "1px solid grey",
          "padding": "5px 0 5px 0",
          "font-size": "15px"
        });
        $(element).text(text.charAt(0).toUpperCase() + text.substr(1));
      })
      
    }); // end ready
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <blockquote>
    hello wolrd
    </blockquote>
    
    <blockquote>
    wow
    </blockquote>
  </body>
</html>

提示＃1：

在 jQuery 中，您可以element.text()使用 element.text('some text').

提示＃2：

在 jQuery 中，您可以使用element.css('prop', 'value')一种样式，但如果您有多个样式，则可以尝试element.css({ ... }) 使其更简单明了..

提示 #3

在 javascript 中，一个字符串是一个字符数组，所以你 cat 选择索引为text[0]or的第一个元素text.charAt(0)。

提示 #4

如果您使用 html 并且文本有新行（\n），您可能想要删除它...请使用修剪或正则表达式/\n+/g删除它

提示 #5

在 javascript 中，您可以使用 split 基于特定字符拆分字符串。它将所有项目分开并返回一个字符串数组，因此更容易迭代。

提示 #6

在 jQuery 中，你可以使用 CSS 选择器来选择一些元素：

  1. #my-element- 选择具有特定 ID 的元素
  2. blockquote:nth-child(0)- 根据元素在一组兄弟中的位置匹配元素
  3. blockquote + blockquote- 一个又一个的块引用 blockquote
  4. blockquote:first-child- 第一个元素...

推荐阅读