按标签/类名长度选择元素
[英]Select element by tag/classname length
问题描述
I'd like to select an element using javascript/jquery in Tampermonkey. 
我想在Tampermonkey中使用javascript / jquery选择一个元素。
The class name and the tag of the elements are changing each time the page loads. 每次页面加载时，类名和元素的标记都在变化。 So I'd have to use some form of regex, but cant figure out how to do it. 所以我必须使用某种形式的正则表达式，但无法弄清楚如何做到这一点。
This is how the html looks like: 这就是html的样子：
<ivodo class="ivodo" ... </ivodo>
<ivodo class="ivodo" ... </ivodo>
<ivodo class="ivodo" ... </ivodo>
- The tag always is the same as the classname. 标记始终与类名相同。
- It's always a 4/5 letter random "code" 它总是一个4/5字母随机“代码”
I'm guessing it would be something like this: $('[/^[az]{4,5}/}') 我猜它会是这样的：$（'[/ ^ [az] {4,5} /}'）
Could anyone please help me to get the right regexp? 谁能帮助我获得正确的正则表达式？
4 个解决方案
解决方案1
2 2017-09-10 20:52:25
You can't use regexp in selectors. 您不能在选择器中使用正则表达式。 You can pick some container and select its all elements and then filter them based on their class names. 您可以选择一些容器并选择其所有元素，然后根据其类名对其进行过滤。 This probably won't be super fast, though. 不过，这可能不会超快。
I made a demo for you: https://codepen.io/anon/pen/RZXdrL?editors=1010 我为你做了一个演示： https ： //codepen.io/anon/pen/RZXdrL？edit = 1010
html: 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 (with jQuery): js（使用jQuery）：
const $elements = $('.container *').filter((index, element) => {
return (element.className.length === 5);
});
$elements.css('color', 'red');
解决方案2
2 2017-09-10 21:44:45
The simplest way to do this would be to select those dynamic elements based on a fixed parent, for example: 最简单的方法是选择基于固定父级的动态元素，例如：
$('#parent > *').each(function() {
// your logic here...
})
解决方案3
1 2017-09-10 21:24:46
If the rules by which these tags are constructed are reliably as you state in the question, then you could select all elements then filter out those which are not of interest, for example : 如果您在问题中说明了构造这些标记的规则是可靠的，那么您可以选择所有元素，然后过滤掉那些不感兴趣的元素，例如：
var $elements = $('*').filter(function() {
return this.className.length === 5 && this.className.toUpperCase() === this.tagName.toUpperCase();
});
Of course, you may want initially to select only the elements in some container(s). 当然，您可能最初只想选择某些容器中的元素。 If so then replace '*' with a more specific selector : 如果是，那么用更具体的选择器替换'*' ：
var $elements = $('someSelector *').filter(function() {
return this.className.length === 5 && this.className.toUpperCase() === this.tagName.toUpperCase();
});
解决方案4
1 2017-09-10 21:49:07
You can do this in vanilla JS DEMO 你可以在vanilla JS DEMO中做到这一点
Check the demo dev tools console 检查demo dev工具控制台
<body>
<things class="things">things</things>
<div class="stuff">this is not the DOM element you're looking for</div>
</body>
JS 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)
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.