Question

我正在尝试使用此代码来反转ul文本中的偶数文本：

$(document).ready(function () {

    $.fn.reverseText = function () {
        var x = "";
        var x = this.text();
        var y = "";
        for (var i = x.length - 1; i >= 0; i--) {
            y += x.charAt(i);
        }
        this.text(y);
    };
    $("ul li:even").reverseText();
});

和html代码是：

<ul>
    <li>this text0</li>
    <li>this text1</li>
    <li>this text2</li>
    <li>this text3</li>
</ul>

但是输出显示text0和text2都反转在一起像这样：

2txet siht0txet siht
this text1
2txet siht0txet siht
this text3

我试着这样写：

$.fn.reverseText = function () {
    this.each(function () {
        var x = "";

        var x = this.text();

        var y = "";
        for (var i = x.length - 1; i >= 0; i--) {

            y += x.charAt(i);
        }

        this.text(y);

    });
};

但它给出了一个错误，即this.text（）不是$（this）.text（）的函数

我该如何解决这个问题？

Answer 1

在each函数的范围内this指的是dom对象。你需要把它作为jquery对象

$.fn.reverseText = function() {
    return this.each(function() {
        var x = $(this).text();
        var y = "";
        for (var i = x.length - 1; i >= 0; i--) {

            y += x.charAt(i);
        }
        $(this).text(y);
    });
};
$("ul li:even").reverseText().css("color","red");

以更清洁的方式，您也可以这样做，

$.fn.reverseText = function() {
    return this.each(function() {
        $(this).text($(this).text().split('').reverse().join(''));
    });
};
$("ul li:even").reverseText().css("color", "red");

Fiddle

Answer 2

这只能在CSS中完成：

＆＃13;

ul li:nth-child(odd) span { /* odd not even because `:nth-child()` is 1 based */
    unicode-bidi:bidi-override;
    direction:rtl;
}

＆＃13;

<ul>
    <li><span>this text0</span></li>
    <li><span>this text1</span></li>
    <li><span>this text2</span></li>
    <li><span>this text3</span></li>
</ul>

＆＃13;

使用$ this和jquery插件

2 个答案: