javascript - javascript: Select a class with the right content

Question

i`m working on a Greasmonkey Script, no i want to know how i can test a class for its content. For example:

<div class="same">Some content</div>
<div class="same">Other content</div>
<div class="same">evenmorecontent</div>
<div class="same">yesthisisalsocontent</div>
<div class="same">youmaynotizedthat</div>
<div class="same">thecontentisdifferent</div>
<div class="same">the cake is yellow</div>

Now i create a array with this classes

var arr = document.getElementsByClassName('same');

Now i want to get the position of "evenmorecontent" in the Array! How do i do this?

Answer 1

如果您想使用 jQuery，您可以使用contains选择器在一行中完成此操作。

在直接 JS 中，您需要遍历数组：

var pos = -1;
for(var x=0;x<arr.length;arr++) {
     if(arr[x].innerHTML.indexOf('evenmorecontent')>-1) {
         pos = x;
    }
}

如果它出现不止一次，这将返回最后一个位置。如果未找到，它将返回 -1。

Answer 2

在执行此操作时尽量不要混合 vanilla JS 和 jQuery。以下函数返回文本第一次出现的位置：

var getTextPosition = function (selector, text) {
  var pos = -1;
  $(selector).each(function(index) { 
    if($(this).text() === text) {
      pos = index;
      return false;    
    }
  }); 
  return pos;
};

示例用法：

getTextPosition(".same", "evenmorecontent");

Answer 3

仅使用一个选择器是不可能的。你必须循环：

var sameEl = (function() {
  var sameArr = document.getElementsByClassName('same');
  for (index in sameArr) {
    if (sameArr[index].innerHTML === 'evenmorecontent') {
      return sameArr[index];
    }
  }
})();