Question

我的页面中有几个段落，我只想显示一个包含我的搜索的段落我不知不觉地尝试了我的代码（和我的第二个问题）我也知道我应该使用如下代码：

if(!$( "p#all_text" ).has("#searchfor").length

显示元素if是否有搜索结果，但如何在一个jquery过滤器中重新生成20多个元素？

＆＃13;

$('#searchfor').keyup(function(){
         var Parag = $('#all_text');
         var ParagText = Parag.text().replace("<span>","").replace("</span>");
         var searchedText = $('#searchfor').val();
         var theRegEx = new RegExp("("+searchedText+")", "igm");    
         var newHtml = ParagText.replace(theRegEx ,"<span>$1</span>");
         Parag.html(newHtml);
         
        	if($(this).has("<span>").length)
{
$(this).parent().show()
$(this).show();  
}
    });

＆＃13;

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}
  .starthidden {
       display: none;
   }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="searchfor"/>
    <p id="all_text"   class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    
    
    <p id="all_text1"   class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    
      <p id="all_text2"   class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum..</p>
      
     <p id="all_text3"  class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum..</p>

＆＃13;

Answer 1

使用var Parag = $('#all_text');，您只搜索第一段。

相反，您想要循环所有段落......您可以使用$('[id^=all_text]')。它获取所有以＆＃39; all_text＆＃39;。

开头的元素

作为替代方案，您可以向元素添加类并使用类选择器。这样你就不会以all_text248结束。

选择段落后，您可以使用.each()循环它们并使用其余代码...

＆＃13;

$('#searchfor').keyup(function() {
  var searchedText = $('#searchfor').val();
  $('[id^=all_text]').each(function() {
    var ParagText = $(this).text().replace("<span>", "").replace("</span>","");
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = ParagText.replace(theRegEx, "<span>$1</span>");
    $(this).html(newHtml);
    $(this).show();
  });
});

＆＃13;

[id^=all_text] span {
  text-decoration: underline;
  background-color: yellow;
}

p {
  margin-bottom: 1em;
}

.starthidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<p id="all_text" class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>


<p id="all_text1" class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

<p id="all_text2" class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum..</p>

<p id="all_text3" class='starthidden'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum..</p>

＆＃13;

显示包含搜索

1 个答案: