更改跨度css会抛出未定义的函数错误

Question

我正在尝试遍历div中的所有子跨度并按间隔更改其css，如下所示：

console.log(container[j]);给出：

<span class=​"char7">​r​</span>​
Uncaught TypeError: undefined is not a function

JS：

function callback() {
 //#palindromeRun div contains value "racecar"
    $("#palindromeRun").lettering(); //split each letter in input into separate span
    $("#palindromeRun span").each(function (i, v) {
        container.push(v);
    });
    i = 0;
    j = container.length-1;
        myInterval = setInterval(function() {
            if (i === j) {
                window.clearInterval(myInterval);
            }
            console.log(container[j]);
            container[i].css({"color" : "green"});
            container[j].css({"color" : "green"});      
            i++;
            j--;

        }, 1000);
}

所以我的问题是，如果container数组包含跨度，例如<span class=​"char7">​r​</span>，为什么会说undefined is not a function？

---

编辑：updated JS Bin

Answer 1

您正在推入容器数组的v不是jQuery对象，它是一个DOM元素，因此，不存在.css（）方法。您需要以$(container[j]).css({"color":"green"});或container[j].style.color = "green"

的形式访问它

Answer 2

Working Demo

问题出在$("#palindromeRun").lettering();。

您没有为此包含插件文件。注释掉这一行，它可以正常工作。

function callback1() {
    $("#palindromeRun").lettering();
    $("#palindromeRun span").each(function (i, v) {

        container.push(v);
    });
    i = 0;
    j = container.length - 1;
    //console.log(container[j]);
    myInterval = setInterval(function () {
        if (i === j) {
            window.clearInterval(myInterval);
            container = [];
        }
        console.log(i + ' : ' + j + ' : len:' + container.length);
        $(container[i]).css({
            "color": "red"
        });
        $(container[j]).css({
            "color": "red"
        });


        i++;
        j--;
        notrunning = true;
    }, 1000);

}

1. 使用$(container[i]).css({"color" : "red"});而非container[i].css({"color" : "red"});
2. container = [];清除容器if(i==j)，否则元素将继续添加到以前的数组版本。

---

要使刻字正常工作，您需要参考此内容。

<script src="http://letteringjs.com/js/jquery.lettering-0.6.1.min.js"></script>

Answer 3

尝试使用以下内容：

console.log(container[j].toString());

因为您将每个span作为容器数组中的对象推送。

Answer 4

尝试这个，

 $(container[j]).css({"color":"green"});