Question

如何启用代码以从按钮文本的开头开始过滤？

如您所见，现在正在过滤所有字母并不重要，它位于何处。例如，通过as过滤器时，我也得到了North America，这不是我想要的。

function checkFilter(filter) {
  const jqCollection = $('.list .list-item:contains(' + filter + ')');
  if (jqCollection.length) {
    jqCollection.css("background",'red');
  }
}

checkFilter('a');

body{	padding:30px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
	<button class="list-item" type="button">Africa</button>
	<button class="list-item" type="button">Antarctica</button>
	<button class="list-item" type="button">Asia</button>
	<button class="list-item" type="button">Europe</button>
	<button class="list-item" type="button">North America</button>
	<button class="list-item" type="button">Australia</button>
	<button class="list-item" type="button">South America</button>
</div>

Answer 1

这里是香草JS和ES6'String.prototype.startsWith：

function checkFilter(filter) {
  const jqCollection = [...document.querySelectorAll('.list .list-item')] // get all list-items
    .filter(el => // now filter them
      el.textContent
      .toLowerCase() // keeping an element only if it's lower-cased textcontent
      .startsWith(filter.toLowerCase()) // starts with the lower-cased letter passed as "filter"
    );
  jqCollection.forEach(el => el.style.backgroundColor = 'red'); // now iterate over the filtered result
}

checkFilter('a');

body {
  padding: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <button class="list-item" type="button">Africa</button>
  <button class="list-item" type="button">Antarctica</button>
  <button class="list-item" type="button">Asia</button>
  <button class="list-item" type="button">Europe</button>
  <button class="list-item" type="button">North America</button>
  <button class="list-item" type="button">Australia</button>
  <button class="list-item" type="button">South America</button>
</div>

Answer 2

只需不使用elasticsearch: Container ID: Image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.7.0 Image ID: Port: 9300/TCP Host Port: 0/TCP State: Waiting Reason: PodInitializing Ready: False Restart Count: 0 Limits: cpu: 1 Requests: cpu: 25m memory: 512Mi Readiness: http-get http://:9200/_cluster/health%3Flocal=true delay=5s timeout=1s period=10s #success=1 #failure=3 Environment: NODE_DATA: false DISCOVERY_SERVICE: augmented-data-explorer-elasticsearch-discovery PROCESSORS: 1 (limits.cpu) ES_JAVA_OPTS: -Djava.net.preferIPv4Stack=true -Xms512m -Xmx512m EXPECTED_MASTER_NODES: 1 MINIMUM_MASTER_NODES: 1 RECOVER_AFTER_MASTER_NODES: 1 Mounts: /usr/share/elasticsearch/config/elasticsearch.yml from config (rw) /usr/share/elasticsearch/data from data (rw) /var/run/secrets/kubernetes.io/serviceaccount from augmented-data-explorer-elasticsearch-master-token-6xtlz (ro)而是使用.contains()来查看结果是否为0。如此简单的操作不需要JQuery。

.indexOf

function checkFilter(filter) {
  const buttons = [].slice.call(document.querySelectorAll("button.list-item"));
  buttons.forEach(function(btn){
    if(btn.textContent.toLowerCase().indexOf(filter) === 0){
      btn.classList.add("match");
    } 
  });
}

checkFilter('a');

body{	padding:30px;}
.match { background: red; }

从按钮字符串的开头过滤元素

2 个答案: