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

請找到正在爲這個問題之下

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

我處理每一件事情在一個函數調用，這將確保更好的性能的jsfiddle。我通過一個函數調用來更改所有單詞。你正在做的替換必須改變，因爲我們需要在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');