Question

我想知道如果在列表中没有它，可以附加一些内容。我已经尝试在$ .each循环中使用if条件但是它会追加每个不匹配的点。

HTML代码：

<ul class="ioptionlist">
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
</ul>

示例

文本值有aa, bb, cc, dd等。如果我检查aa文本值但在列表中不可用，请将<b>No</b>标记仅添加到div中。

当我使用带有if条件的$ .each时，它会检查第一个li并且它是可用的但是在第一个li之后附加每个li值，因为其他li值不是aa。

我想检查所有li值，如果其中一个li标签没有这个aa值，则只返回<b>No</b>一个。

JQuery代码：

var findv = $("li");

        $(findv).each(function(){
            if(findv.text()=="aa"){

            }           
            else{
                list.append('<a class="dropdown-item" href="javascript:;">'+val.text+'</a>');
            }
        });

Answer 1

一个简单的功能应该能够做到这一点。我创建了一个结果元素来保存结果，因为你的意图并不完全清楚，但你应该能够从中构建。注意我在那里添加了额外的文本，因此您可以看到Found / Not Found条件。

function testValue(checkValue) {
  var isInList = !!$('.ioptionlist').find('.ioption').filter(function() {
    return $(this).text() == checkValue;
  }).length;
  if (!isInList) {
    $("#results").append('<a class="dropdown-item" href="javascript:;"><b>' + checkValue + ' not found</b></a>');
  } else {
    $("#results").append('<b>'+checkValue+' found</b>');
  }
}
$(function() {
  testValue("rr");// will not find this
  testValue("aa");// finds this
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ioptionlist">
  <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
</ul>
<div id="results">howdy

</div>

请注意，这会对文本进行测试，如果您在li项目上添加更多文字，则该文字将不再有效。

Answer 2

var findv = $("li");
var check = false;
$(findv).each(function() {
  if ($(this).text() != "aa") {
    check = true;
  }
});

if (check) {
  $(".showMessage").html('<b>No</b>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showMessage"></div>
<ul class="ioptionlist">
  <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
  <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
</ul>

Answer 3

这是一个带有注释的快速jQuery-less版本。

＆＃13;

// Default query
var query = 'aa';
var result = false;

// Grab each LI in the dom
document.querySelectorAll('li').forEach( function(index, el){
  
  // Check each li to see if a value does
  // not match aa
  if (el.text !== query) {
    // we found a li without aa
    result = true
  }
  
});

// If query was true, then let's append <b>No</b> to the 
// results div
if (result) {
  var domNode = document.createElement('b');
  domNode.innerHTML = 'NO';
  document.getElementById('results').appendChild(domNode);
}

＆＃13;

<div id="results"></div>

<ul class="ioptionlist">
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li>
</ul>

＆＃13;

检查它是否在li列表中不可用，仅添加一次

3 个答案: