通过过滤器隐藏元素的javascript

Question

我有一个html页面，其中我有以下结构：

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<div class="tabella">
    <div class="rigaHead"></div>

            <div class="rigaEven">
                <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

            <div class="rigaOdd">
              <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

    </div>
</div>

我想只显示带有RigaEven类或RigaOdd的div标签 其中标记在图像中突出显示的文本等于搜索字段的那部分... 我该怎么办？

Answer 1

您可以这样做：

＆＃13;

＆＃13;

function search(what){
    var elements = document.querySelectorAll(".rigaEven, .rigaOdd");
    for(var i = 0; i < elements.length;i++){
      var v = elements[i];
      if(what.length == 0 || v.querySelector(".what").textContent.indexOf(what) != -1){
          v.style.display = "block";
      }else{
          v.style.display = "none";
      }
    }
}

＆＃13;

<div><input type="text" placeholder="Search what" onkeyup="search(this.value)"/></div>
<div class="rigaEven">
                <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">XXX</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

            <div class="rigaOdd">
              <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

为了使搜索案例不敏感，您可以使用v.querySelector(".what").textContent.toLowerCase().indexOf(what.toLowerCase())

Answer 2

＆＃13;

＆＃13;

function search() {
    	var text = $('#search').val();
    	$( "p").css( "text-decoration", "none" );
    	$( ".rigaEven").hide();
    	$( ".rigaOdd").hide();
    	
    	$( ".rigaEven:contains("+text+")" ).show();
    	$( ".rigaOdd:contains("+text+")" ).show();
    	
    	$( "p:contains("+text+")" ).css( "text-decoration", "underline" );
    	
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabella">
        <div class="rigaHead"></div>
    
                <div class="rigaEven">
                    <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>09:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">YYY</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>
    
                <div class="rigaOdd">
                  <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>09:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">ZZZ</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>
    
        </div>
    </div>

    <input type="text" id="search" onKeyUp="search()" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不确定你想要什么但是，我想你想根据搜索结果显示相关的div，你在这里：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#input_button").on("click", function() {
    $(".rigaEven").hide();
    $(".rigaOdd").hide();
    var value = $("#input_text").val();
    if (value != null && value != "") {
      if ($(".rigaEven .col1 .room").text().indexOf(value) >= 0
           ||$(".rigaEven .col1 .where").text().indexOf(value) >= 0
           ||$(".rigaEven .col2 .half .when").text().indexOf(value) >= 0
           ||$(".rigaEven .col3 .what").text().indexOf(value) >= 0
           ||$(".rigaEven .col3 .who").text().indexOf(value) >= 0) {
        $(".rigaEven").show();
      } else if ($(".rigaOdd .col1 .room").text().indexOf(value) >= 0
           ||$(".rigaOdd .col1 .where").text().indexOf(value) >= 0
           ||$(".rigaOdd .col2 .half .when").text().indexOf(value) >= 0
           ||$(".rigaOdd .col3 .what").text().indexOf(value) >= 0
           ||$(".rigaOdd .col3 .who").text().indexOf(value) >= 0) {
        $(".rigaOdd").show();
      }
    }
  });
});

＆＃13;

.rigaEven {
  display: none;
}
.rigaOdd {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search"><input type="text" id="input_text" /><input type="button" id="input_button" value="search" /></div>
<div class="tabella">
    <div class="rigaHead">

            <div class="rigaEven">
                <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">DR</p>
                </div>
            </div>

            <div class="rigaOdd">
              <div class="col1">
                    <p class='room'>ZZZ</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">TTT</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;