代码之家 › 专栏 › 技术社区 › Questioner

如何在Javascript的if语句中成功地用classList代替className?

javascript

-2

Questioner · 技术社区 · 8 年前

if 声明作品:

if (children[i].className === siblingClass)

然而,它只有 children[i] 只有一 siblingClass .我想让函数更一般化一点,以测试 儿童[i] 即使它也有其他类。

classList.contains function ,如下所示:

if (children[i].classList.contains(siblingClass))

但是,当我尝试(在Chrome中)时,控制台日志显示:

如何创建测试以查看是否 儿童[i] 有 兄弟类

请注意,如果可能的话,我希望有一个不需要jQuery的纯Javascript解决方案。

这是完整的函数,其中 如果

function getSiblingByClass(currentObject, siblingClass)
{
    var parentofSelected = currentObject.parentNode,
        children = parentofSelected.childNodes,
        element,
        i;

    for (i = 0; i < children.length; i++)
    {
        if (children[i].classList.contains(siblingClass))
        {
            element = children[i];
            break;
        }
    }
    return element;
}

当我想在同级元素中搜索具有指定类的元素时,从其他函数中调用此函数。它获取当前元素的父元素,遍历所有子元素,并返回第一个匹配项。或者,至少是这样。

   <div>
        <span class="fee">hello world</span>
        <span class="fi">Blah blah blah</span>
        <button class="foo" onclick="copySiblingDataByClass(this, 'fi');">Click here</button>
    </div>

copySiblingDataByClass() 将依次呼叫 getSiblingByClass() ,并传递自身和要选择的类的名称。

4 回复 | 直到 8 年前

user4244405 user4244405 8 年前

使用 Node.contains 制作

Object.defineProperty(String.prototype,'contains',{enumerable:false, configurable:false, writable:false, value:function(find)
{
    return ((' '+this+' ').indexOf(' '+find+' ') > -1);
}});

现在,您可以在代码中的任何地方使用它,如下所示:

someNode.className.contains('foo'); // returns a boolean

..然而,如果是我,我只会使用你的函数自动应用于所有元素,如下所示:

Object.defineProperty(Element.prototype,'hasClass',{enumerable:false, configurable:false, writable:false, value:function(name)
{
    return ((' '+this.className+' ').indexOf(' '+name+' ') > -1);
}});

现在只需像这样使用它:

someNode.hasClass('foo');

yqlim 8 年前

以下是您可以尝试的一些方法:

var div = document.getElementById('div');

// classList method
if (div.classList.contains('world'))
    console.log(true);
else
    console.log(false);

// RegExp method
if (/\s|^\wworld\s/.test(div.className))
    console.log(true);
else
    console.log(false);

// Converting classname into array to use array method
if (div.className.split(' ').includes('world'))
    console.log(true);
else
    console.log(false);
    
// Also using array method, but more compatible
if (div.className.split(' ').indexOf('world') > -1)
    console.log(true);
else
    console.log(false);

// Borrowing array method to use on classList
if (Array.prototype.includes.call(div.classList, 'world'))
    console.log(true);
else
    console.log(false);

<div id="div" class="hello world foo bar"></div>

附言

children[i] classList 因此 undefined .

另一种可能是你的Chrome浏览器已经过时了。

user4244405 user4244405 8 年前

您的代码似乎是 for 因此,请考虑以下内容:

var children=[].slice.call(document.getElementById('someID').childNodes);
var siblingClass = 'someClassName'; // for example

for(var i in children)
{
    if(!children.hasOwnProperty(i)){continue}; // get rid of "undefined"
    if(children[i].className.indexOf(siblingClass) > -1)
    {
        // you other code here 
    }
}

Questioner 8 年前

classList.contains() 对我来说不起作用 MDN says it's been supported in Chrome since version 8 我正在运行版本60。

this answer 这将成功地从附着到对象的多个类中选择一个类。

function hasClass(element, cls)
{
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

使用此函数,我的if语句现在如下所示:

if (hasClass(children[i], siblingClass))

…它工作得很好,所以这是我将使用的解决方案。

classList.contains()