jQuery-在句子中查找一個單詞並添加跨度

Question

我正在編寫一個函數來查找句子中的單詞並在頂部添加跨度。 這是代碼，但它不起作用。 誰能指出我的錯誤？ 謝謝

 function find_and_add(element = "", findWord = "") { $(element).each(function() { var arr = $('h1 a', this).text().split(' '); var newTitle = ""; $.each(arr ,function(key, value) { if (value == findWord) { newTitle += "<span>"+ value + "</span><br/>"; } else { newTitle += value + " "; } }); $("h1 a", this).html(newTitle); }); } find_and_add('.wrapper', 'BMW'); find_and_add('.wrapper', 'Toyota'); find_and_add('.wrapper', 'Ferrari');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <h1> <a href="#"> Brand name BMW </a> </h1> <h1> <a href="#"> Brand name Toyota </a> </h1> <h1> <a href="#"> Brand name Ferrari </a> </h1> </div>

Answer 1

您的代碼有很多問題。

類名前需要一個點

find_and_add('.wrapper', 'BMW');

您正在傳遞父包裝器，然后嘗試以一種非常復雜的方式在一堆孩子中找到一個特定的單詞。 為什么不按照下面的示例傳遞父項​​和搜索詞列表。

 function find_and_add(element = "", findWords = "") { $(element).find("h1 a").each(function() { var $elem = $(this); var arr = $elem.text().split(' '); var newTitle = ""; $.each(arr ,function(key, value) { if (findWords.indexOf(value)>-1) { newTitle += "<span>"+ value + "</span><br/>"; } else { newTitle += value + " "; } }); $elem.html(newTitle); }); } find_and_add('.wrapper', ['BMW','Toyota','Ferrari']);

 span{ background-color:yellow }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <h1> <a href="#"> Brand name BMW </a> </h1> <h1> <a href="#"> Brand name Toyota </a> </h1> <h1> <a href="#"> Brand name Ferrari </a> </h1> </div>

Answer 2

請找到適用於以下問題的 jsfiddle

https://jsfiddle.net/princedc/mg7bkeas/

我在一個函數調用上處理每一件事，這將確保更好的性能。 我通過一個函數調用傳遞所有要更改的單詞。 您所做的替換必須更改，因為我們需要在 jquery 中單獨替換元素 $(this)。

function find_and_add(element = "", findWord = "") {
          var lookUpWords = findWord.split(' ');
      $(element).each(function() {
        var arr = $('h1 a', this);
        //console.log(arr);

        $.each(arr ,function(key, value) {
          debugger;
            console.log(value);
          var newTitle = "";
          var words = value.text.split(' ');
          $.each(words,function(wkey,wvalue){
             if (lookUpWords.indexOf(wvalue) >= 0) {
              newTitle += "<span>"+ wvalue + "</span><br/>";
            } else {
              newTitle += wvalue + " ";
            }

          });
         $(this).html(newTitle);

        });
        //$("h1 a", this).html('').html(newTitle);
      });
    }

    find_and_add('.wrapper', 'BMW Toyota Ferrari');
    //find_and_add('.wrapper', 'Toyota');
    //find_and_add('.wrapper', 'Ferrari');