Question

我试图通过：contains循环遍历一堆h1＆。它适用于我使用1个关键字，但我尝试使用：包含多个关键字。现在，我使用localStorage，保存关键字，然后在选择器中调用它，但这只适用于1个关键字，这是我不想要的。

HTML

<div class="item1">
    <h1>Silk</h1>
</div>
<div class="item2">
    <h1>Champion</h1>
</div>
<div class="item3">
    <h1>Smooth</h1>
</div>

JQuery的

itemKeyword1 = localStorage["Keyword1"];
$("h1:contains('" + itemKeyword1 + "'").each(function(){
            //do something

})

我想创建一个数组var array = ['Silk','Champion'];，然后.each()在h1的数组中搜索这些关键字，然后返回它们或者只是做一些事情它。

Answer 1

如果你想要“和”，你可以做多个filter（）操作来缩小选择范围。

$("h1:contains('" + itemKeyword1 + "'").filter("h1:contains('" + itemKeyword2 + "'")

如果你想要“或”，只需将逗号分隔的多个选择器列表给jQuery。

$("h1:contains('" + itemKeyword1 + "',h1:contains('" + itemKeyword2 + "'")

对于更复杂的“或”案例，请分别选择它们然后合并。

<div class="item1">
    <h1>Silk</h1>
</div>
<div class="item2">
    <h1>Champion</h1>
</div>
<div class="item3">
    <h1>Smooth</h1>
</div>
<div class="item3">
    <h1>Smooth and Silk</h1>
</div>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<script type="text/javascript">

var keywords = ['Silk','Smooth'];

var $items = $();
$.each(keywords, function(key, value){
    $items = $items.add("h1:contains('" + value + "')");
});

$.uniqueSort($items).each(function(){
   // do your stuff
   $(this).css({'border':'1px solid red'});
});

</script>

Answer 2

尝试以下方式：

var itemKeyword1 = ["Silk" , "Champion", "Not Present"]; //Assuming localStorage.
var res = []
$("h1").each(function(){
  var thisText= $(this).text();
  var thatObj = $(this);
  $(itemKeyword1).each(function(i, val){
    if (thisText.indexOf(val) > -1) {
      res.push($(thatObj)[0]);
    }
  });
  
});
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
    <h1>Silk</h1>
</div>
<div class="item2">
    <h1>Champion And ....</h1>
</div>
<div class="item3">
    <h1>Smooth Not</h1>
</div>

Answer 3

LocalStorage以字符串格式存储值。因为，您在localStorage中存储数组，它将被转换为字符串。要将字符串转换回数组，您必须JSON.parse()它。之后使用jQuery.each()，您可以遍历数组中的单词。

var localStorageStored = '["Silk","Champion"]';
var stored = JSON.parse(localStorageStored);
var result = [];
$.each(stored, function(index,value) {
  var temp = $("h1:contains('"+value+"')");
  if(temp)
    result.push(temp)
});
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <h1>Silk</h1>
</div>
<div class="item2">
    <h1>Champion</h1>
</div>
<div class="item3">
    <h1>Smooth</h1>
</div>

Answer 4

您应该在所选的h1元素上使用filter函数;

var headings = ['Silk','Champion']; 
var h1s =  $('h1').filter(function() { 
              return headings.indexOf($(this).text()) != -1; 
           });
alert(h1s.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Silk</h1>
<h1>Champion</h1>
<h1>Smooth</h1>

如何使用.each（）遍历元素并检查元素是否与数组匹配

4 个答案: