Question

我正在编写一个函数来在句子中查找单词并在顶部添加span。这是代码，但它不起作用。谁能指出我的错误？感谢

  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');

Jquery-在一个句子中查找单词并添加span

2 个答案: