按標簽/類名長度選擇元素

Question

我想在Tampermonkey中使用javascript / jquery選擇一個元素。

每次頁面加載時，類名和元素的標記都在變化。 所以我必須使用某種形式的正則表達式，但無法弄清楚如何做到這一點。

這就是html的樣子：

<ivodo class="ivodo" ... </ivodo>
<ivodo class="ivodo" ... </ivodo>
<ivodo class="ivodo" ... </ivodo>

標記始終與類名相同。
它總是一個4/5字母隨機“代碼”

我猜它會是這樣的：$（'[/ ^ [az] {4,5} /}'）

誰能幫助我獲得正確的正則表達式？

Answer 1

您不能在選擇器中使用正則表達式。 您可以選擇一些容器並選擇其所有元素，然后根據其類名對其進行過濾。 不過，這可能不會超快。

我為你做了一個演示： https ： //codepen.io/anon/pen/RZXdrL？edit = 1010

HTML：

<div class="container">
  <abc class="abc">abc</abc>
  <abdef class="abdef">abdef</abdef>
  <hdusf class="hdusf">hdusf</hdusf>
  <ueff class="ueff">ueff</ueff>
  <asdas class="asdas">asdas</asdas>
  <asfg class="asfg">asfg</asfg>
  <aasdasdbc class="aasdasdbc">aasdasdbc</aasdasdbc>
</div>

js（使用jQuery）：

const $elements = $('.container *').filter((index, element) => {
  return (element.className.length === 5);
});

$elements.css('color', 'red');

Answer 2

最簡單的方法是選擇基於固定父級的動態元素，例如：

$('#parent > *').each(function() {
  // your logic here...
})

Answer 3

如果您在問題中說明了構造這些標記的規則是可靠的，那么您可以選擇所有元素，然后過濾掉那些不感興趣的元素，例如：

var $elements  = $('*').filter(function() {
    return this.className.length === 5 && this.className.toUpperCase() === this.tagName.toUpperCase();
});

DEMO

當然，您可能最初只想選擇某些容器中的元素。 如果是，那么用更具體的選擇器替換'*' ：

var $elements  = $('someSelector *').filter(function() {
    return this.className.length === 5 && this.className.toUpperCase() === this.tagName.toUpperCase();
});

Answer 4

你可以在vanilla JS DEMO中做到這一點

檢查demo dev工具控制台

<body>
  <things class="things">things</things>
  <div class="stuff">this is not the DOM element you're looking for</div>
</body>

JS

// Grab the body children
var bodyChildren = document.getElementsByTagName("body")[0].children;

// Convert children to an array and filter out everything but the targets
var targets = [].filter.call(bodyChildren, function(el) {
  var tagName = el.tagName.toLowerCase();
  var classlistVal = el.classList.value.toLowerCase();
  if (tagName === classlistVal) { return el; }
});

targets.forEach(function(el) {
// Do stuff
  console.log(el)
})

按標簽/類名長度選擇元素

問題描述

4 個解決方案

解決方案1
2 2017-09-10 20:52:25

解決方案2
2 2017-09-10 21:44:45

解決方案3
1 2017-09-10 21:24:46

解決方案4
1 2017-09-10 21:49:07

JS

按標簽/類名長度選擇元素

問題描述

4 個解決方案

解決方案1 2 2017-09-10 20:52:25

解決方案2 2 2017-09-10 21:44:45

解決方案3 1 2017-09-10 21:24:46

解決方案4 1 2017-09-10 21:49:07

JS

解決方案1
2 2017-09-10 20:52:25

解決方案2
2 2017-09-10 21:44:45

解決方案3
1 2017-09-10 21:24:46

解決方案4
1 2017-09-10 21:49:07