Question

当我在输入表单中没有输入文字时，我想隐藏整个div。现在，我可以在所有child div中进行搜索，并在没有文本的情况下隐藏每个child div。但是我现在有一个问题，例如：

<div class="col-9 infos">
    <div class="row">
        <div class="col-4 nome">
            <b>Nome: </b> Davide
        </div>
        <div class="col-4 regione">
            <b>Regione: </b> Reggio
        </div>
        <div class="col-4 citta">
            <b>Città: </b>Citta "
        </div>
    </div>
    <div class="row">
        <div class="col-4 dataNascita">
            <b>Data di nascita: </b>02-02-1992
        </div>
        <div class="col-4 coaching">
            <b>Coaching online: </b>Sì
        </div>
        <div class="col-4 sesso">
            <b>Sesso: </b>Maschio
        </div>
    </div>
    <div class="row border-bottom">
        <div class="col-6 blurry-text cellulare">
            <b>Cellulare: </b> 1231231231
        </div>
        <div class="col-6 blurry-text email">
            <b>Email: </b>asdaklsnd@gmail.com
        </div>
    </div>
    <div class="row descriptionText">
        <div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
        <div class='col-2 align-items-center'>
            <button type='button'>Profilo</button>
        </div>
    </div>
</div>

如果我搜索Davide，则.infos div的所有其他子级将被隐藏，因为它们不包含文本，但是如果有另一个实际包含该文本的子级，我希望保持可见状态。

我在这里创建了一个测试示例：https://jsfiddle.net/hj9r2L4u/6/ 我想为搜索栏输入更多的单词，图像中有2个用户的名字是Davide，但是在不同的城市，我想输入类似的内容

Da City2

实际上，使用“ Da”显示两个div，然后使用City2隐藏不包含文本的div。

我实际使用的代码是：

jQuery("#searchPt").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    jQuery(".information").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

Answer 1

您可以包装行并将其定位为包含元素，请参见下面的代码段：-

jQuery("#searchPt").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  jQuery('.row').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container w-100 h-100">
  <input id="searchPt">
  <div id="goToProfile">
    <div class="information">
      <div>
        <img alt="Immagine profilo">
        <div class="results">
          <div class="results-content">
            <span class="stars">3</span>
          </div>
        </div>
      </div>
      <div class="col-9 infos">
      
        <div class="rowWrap">
          <div class="row">
            <div class="col-4 nome\"><b>Nome: </b> Davide </div>
            <div class="col-4 regione\"><b>Regione: </b> Reggio </div>
            <div class="col-4 citta\"><b>Città: </b>Citta "</div>
          </div>
          <div class="row">
            <div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
            <div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
            <div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
          </div>
          <div>
          
            <div class="rowWrap">
              <div class="row border-bottom\">
                <div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
                <div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd@gmail.com</div>
              </div>
              <div class="row descriptionText \">
                <div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
                <div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
              </div>
            </div>

          </div>
          <div class="information">
            <div>
              <img alt="Immagine profilo">
              <div class="results">
                <div class="results-content">
                  <span class="stars">3</span>
                </div>
              </div>
            </div>
            <div class="col-9 infos">
              <div class="row">
                <div class="col-4 nome\"><b>Nome: </b> Simone </div>
                <div class="col-4 regione\"><b>Regione: </b> Reggio </div>
                <div class="col-4 citta\"><b>Città: </b>Emilia</div>
              </div>
              <div class="row\">
                <div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
                <div class="col-4 coaching\"><b>Coaching online: </b>No</div>
                <div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
              </div>
              <div class="row border-bottom\">
                <div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
                <div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd@gmail.com</div>
              </div>
              <div class="row descriptionText \">
                <div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
                <div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
              </div>
            </div>
          </div>
        </div>
      </div>

Answer 2

对于多个条件，请拆分并使用一些短路逻辑测试每个值：

def get_detail_data(soup):
    try:
        title = soup.find('div', class_="it-ttl").find('itemprop')
    except:
        title = ''

在div及其所有孩子中搜索文本

2 个答案: