如何使用jquery獲取span元素后的文本

Question

我想返回值 1718 和 15.95 美元，但是當我運行 SKU 下方的代碼時：和零售價：在警報框中返回。 我究竟做錯了什么？

 var a = $('.description span').first().contents().filter(function() { return this.nodeType == 3; }).text(); alert(a); var b = $('.description span').last().contents().filter(function() { return this.nodeType == 3; }).text(); alert(b);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="description"> <span>SKU:</span> 1719 </div> <div class="description"> <span>Retail Price:</span> $15.95 </div>

Answer 1

 $(document).ready(function(){ console.log($(".description").eq(0).contents().eq(2).text().trim()); console.log($(".description").eq(1).contents().eq(2).text().trim()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="description"> <span>SKU:</span> 1719 </div> <div class="description"> <span>Retail Price:</span> $15.95 </div>

Answer 2

GRF,

它不起作用的原因是您的 sku 和價格超出了范圍。 試試下面希望它會有所幫助。

var a = $('.sku').contents().filter(function() {
    return this.nodeType == 3;
    }).text(); 
alert(a);

var b = $('.price').contents().filter(function() {
    return this.nodeType == 3;
      }).text();
alert(b);

<div class="description">
        <span>SKU:</span>
        <div class='sku'>1719</div>
</div>
<div class="description">
        <span>Retail Price:</span>
        <div class='price'>$15.95<div>

Answer 3

/*!
 * Find text within given elements (1st param - selector)
 * while optionally excluding other elements (2nd - exclusion)
 **
 * @param  {String} selector  
 * The reference of the elements (aka tags) to search within.
 **
 * @param  {String} exclusion [optional - default: null] 
 * The reference of the elements to exclude from searching.
 **
 * @return {Array}
 * An array of strings found in search.
 */

 const txt = (selector, exclusion = null) => { // Collect all elements that match {{selector}}ninto a NodeList const roots = document.querySelectorAll(selector); // Declare an empty array let text = []; /* {{element}} label statement will allow `continue` and `break` to jump from within a loop to the beginning of another */ element: // Iterate each tag of the {{roots}} NodeList for (let root of roots) { // if {{exclusion}} wasn't passed... if (exclusion === null) { // Add the text of the current tag ({{root}}) to the {{text}} array text.push(root.textContent.trim()); //Otherwise... } else { // Collect all text and elements into a HTML Collection let nodes = root.childNodes; // Iterate each text/element node... for (let node of nodes) { // if current node is an element... if (node.nodeType === 1) { // if current node matches {{exclusion}} if (node.matches(exclusion)) { // just skip forward to the next iteration continue; // Otherwise... } else { // Redefine​ {{root}} to {{node}} root = node; // Jump to the label of the outer loop continue element; } // Or if {{node}} is a text node... } else if (node.nodeType === 3) { // Add the text node to {{text}} array text.push(node.nodeValue.trim()); // Otherwise stop iteration of the remaining nodes } else { break; } } } } // return a filtered array of strings return text.filter(t => t); } // Find the text of all <li> console.log(txt('li')); // Find the text of all <li> and exclude text of all <label> console.log(txt('li', 'label'));

 <ul> <li> <label>SKU:</label> 1719 </li> <li> <label>Retail Price:</label> $15.95 </li> </ul>