jQuery匹配一个包含所有类的元素

Question

我有以下布局:

<p type="data" class="element section">
<span class="element content start">Start</span>
<span class="element content stop">Stop</span>
<span class="element content text">Some text</span>
</p>

我试图写一个函数来返回一个引用的跨度，用户可以调用指定字符串，例如(坏的伪代码):

callMe = function(str) {
return $node.find(str);  // $node is a reference to `p`
}

所以我希望用户调用callMe('element content stop')并返回对停止跨度的引用。find使用OR条件，但我需要它在所有类上作为AND操作。

Answer 1

您可以尝试过滤

const node = document.querySelector(".element.section");
const callMe = str => {
const classes = str.split(/s+/);
return [...node.querySelectorAll("span")]
.filter(span => classes
.filter(className => span.classList.contains(className)).length === classes.length)
}
console.log(
callMe("element content stop")
)

<p type="data" class="element section">
<span class="element content start">Start</span>
<span class="element content stop">Stop</span>
<span class="element content text">Some text</span>
</p>

Answer 2

您需要将.用于选择器类，如:

$node = $('p');
let callMe = function(str) {    
return $node.find(str);  // $node is a reference to `p`
}
const span = callMe('.stop');
console.log(span[0], span[0].innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p type="data" class="element section">
<span class="element content start">Start</span>
<span class="element content stop">Stop</span>
<span class="element content text">Some text</span>
</p>

Answer 3

我会根据空格字符将字符串拆分为数组，然后循环遍历该数组以构建选择器。

callMe = function(str) {
const classes = str.split(' ');
let classSelector;
for (let i = 0; i < classes.length; i++) {
classSelector = '.' + classes[i];
}
document.querySelector(classSelector).classList.add('highlight');
// or $(classSelector).addClass('highlight')
// but we're weaning ourselves from jQuery, right? :)
}
callMe('element content stop');

.highlight {
color: red;
}

<p type="data" class="element section">
<span class="element content start">Start</span>
<span class="element content stop">Stop</span>
<span class="element content text">Some text</span>
</p>

Answer 4

1. 为节点传递一个jQuery对象和一个选择器字符串。注意:这个方法允许你传入一个选择器字符串，表示n个类。

2. 创建一个类变量，方法是在空格上分割字符串，映射到数组上，并为每个元素返回一个新的类字符串，然后将映射的数组连接起来，并使用该字符串作为查找选择器。

function callMe(node, selector) {
const classes = selector
.split(' ')
.map(el => `.${el}`)
.join('')

return find = $(node).find(classes);
}
const spans = callMe($('p'), 'element content');
const start = callMe($('p'), 'start');
const stop = callMe($('p'), 'element content stop');
spans.each((i, v) => {
console.log($(v).text());
});
console.log($(start).text());
console.log($(stop).text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p type="data" class="element section">
<span class="element content start">Start</span>
<span class="element content stop">Stop</span>
<span class="element content text">Some text</span>
</p>