使用toUpperCase方法使p元素以大写形式显示

Question

正如您从我的代码中可以看出的那样。我对此很新，所以请尽量保持您的答案简单。

这个任务是让我输入的任何名字都以大写字母返回。

但我希望一切都以大写显示，名称和段落。我尝试过所有我能想到的事情，我觉得这很简单。

这是我到目前为止有：

$(document).ready(function() { 
 
    $("#letter form").submit(function(event) { 
 
    var nameInput = $("input#name").val().toUpperCase(); 
 

 
    $(".name1").text(nameInput); 
 
    $("#response").show(); 
 

 

 
    event.preventDefault(); 
 

 
    }); 
 
});

#response { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!--link href="css/styles.css" rel="stylesheet" type="text/css"--> 
 

 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<!--script src="js/scripts.js"></script--> 
 

 
<div class="container"> 
 
<h1>Fill in the blanks to write your story!</h1> 
 
<div id="letter"> 
 
<form> 
 
    <div class="form-group"> 
 
    <label for="name">A name</label> 
 
    <input id="name" class="form-control" type="text"> 
 
    </div> 
 

 
    <button type="submit" class="btn">Show me the response</button> 
 
</form> 
 
</div> 
 

 
<div id="response"> 
 
<h1>A fantastical adventure</h1> 
 
<blockquote> 
 
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</blockquote> 
 
</div> 
 
</div>

Answer 1

假设你想为你的所有<p>标签，你jQuery selectors遵循相同的规则，CSS选择器。考虑到这一点，你可以得到innerText与jQuery .text()：

// Select ALL p tags, and set their text to upper case 
$('p').text($('p').text().toUpperCase()); 

如果你想让它专为包含类name1一个孩子，我们可以使用类似的想法与jQuery .closest()第一父段落：

// Split into a var to help readability 
// Grab the "closest ancestor" (get the first parent that is a p) 
var closestP = $('.name1').closest('p'); 
closestP.text(closestP.text().toUpperCase()); 

我希望这是你要找的！

编辑：另一种方法需要修改的HTML的特定p：

HTML

<div id="response"> 
    <h1>A fantastical adventure</h1> 
    <blockquote> 
    <p id="toCapital"><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </blockquote> 
</div> 

jQuery的

$('#toCapital').text($('#toCapital').text().toUpperCase()); 

这里我用了一个类似的想法到第一个例子，除了不是选择所有段落ta gs，我在现有的版本中添加了一个id，选中了那个，然后修改了文本。

你也可以做一个更先进一点的选择，但如果你添加任何事前这不会选择你想利用同款：

var first = $('p').first(); 
first.text(first.text().toUpperCase()); 

我敢肯定，你可以看到我随着这些发展，关键是想想如何识别你想要改变的东西，起初很棘手，但当你开始了解name,class,id以及其他属性以及如何组合它们以创建独特的组合。

Answer 2

让所有的回应大写：

$("#response").html($("#response").html().toUpperCase()); 

.html()集和返回所有文字和选择的元素的标记......
这是最大的集装箱$("#response")，你必须应用toUpperCase()上方法。

见下文：

$(document).ready(function() { 
 
    
 
    $("#letter form").submit(function(event) { 
 
    event.preventDefault(); 
 
    var nameInput = $("input#name").val().toUpperCase(); 
 
    $(".name1").text(nameInput); 
 

 
    $("#response").html($("#response").html().toUpperCase()); 
 
    $("#response").show(); 
 

 
    }); 
 
});

#response { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!--link href="css/styles.css" rel="stylesheet" type="text/css"--> 
 

 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!--script src="js/scripts.js"></script--> 
 

 
<div class="container"> 
 
<h1>Fill in the blanks to write your story!</h1> 
 
<div id="letter"> 
 
<form> 
 
    <div class="form-group"> 
 
    <label for="name">A name</label> 
 
    <input id="name" class="form-control" type="text"> 
 
    </div> 
 

 
    <button type="submit" class="btn">Show me the response</button> 
 
</form> 
 
</div> 
 

 
<div id="response"> 
 
<h1>A fantastical adventure</h1> 
 
<blockquote> 
 
<p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</blockquote> 
 
</div> 
 
</div>