Question

我试图从元素的已知类名“ i-need-this-”的一部分中获得完整的类名“ i-need-this-2”。

示例

<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

我试图获取元素的完整类，创建一个数组，并使用indexof搜索所需的类，但是我的代码失败了。

partofclassname='i-need-this-';
let allclasses = $('#myelement').attr('class').split(' ');
let wanted_class= allclasses[allclasses.indexOf(partofclassname)];

wanted_class未定义且indexof为-1

我的代码有什么问题？

非常感谢。

Answer 1

您的代码几乎在那里。当您使用split时，它将返回一个数组。您可以使用filter函数，并在回调中使用includes。因此，此数组将包含那些包含您要查找的关键字的类

let partofclassname = 'i-need-this-';
let matchedClass = $('#myelement').attr('class').split(' ').filter(item => item.includes(partofclassname));
console.log(matchedClass)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

Answer 2

allclasses.indexOf(partofclassname)将检查完整的字符串（类）。对于一部分，您需要检查数组的每个元素。使用Array.prototype.find()并使用String.prototype.indexOf()

检入数组的每个元素

partofclassname='i-need-this-';
let allclasses = $('#myelement').attr('class').split(' ');
console.log(allclasses)
let wanted_class = allclasses.find(c => c.indexOf(partofclassname) !== -1);
console.log(wanted_class)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

Answer 3

使用RegExp：

var patt =/\bi-need-this-[^ ]*/g ;

let allclasses = document.getElementById('myelement').className ;

console.log( allclasses.match(patt)[0] ) ;

<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

Answer 4

您需要对类名称值执行indexOf，而不是在这些类名称的数组中执行该操作：

let partofclassname='i-need-this-';
let allclasses = $('#myelement').attr('class').split(' ');
let index = allclasses.findIndex((className) => className.indexOf(partofclassname) !== -1);
let wanted_class= allclasses[index];
console.log(wanted_class);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

Answer 5

因为indexOf找到了元素的完全匹配。

改为尝试filter。

let partofclassname = 'i-need-this-';
let allclasses = $('#myelement').attr('class').split(' ');
let wanted_class = allclasses.filter(e => e.includes(partofclassname));

console.log(wanted_class)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

Answer 6

有多种方法可以获取所需的类名。

您可以有效地将.find()与includes()一起使用，如下所示-

let allclasses = $('#myelement').attr('class').split(' ');
let partofclassname='i-need-this-';
let wanted_class = allclasses.find(element => element.includes(partofclassname));

console.log(wanted_class);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

您可以简单地使用循环＆includes进行以下操作-

let allclasses = $('#myelement').attr('class').split(' ');
let partofclassname='i-need-this-';
let wanted_class = undefined;

allclasses.forEach(element => {
	wanted_class = element.includes(partofclassname) ? element : wanted_class
});

console.log(wanted_class)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

通过类名的一部分查找类

6 个答案: