с помощью $ это с JQuery вилкой в ​​

Question

Я пытаюсь этот код, чтобы полностью изменить даже текст в уль тексте:

$(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 отЭ

• это text1

• 2txet siht0txet отЭ

• это 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); 

    }); 
}; 

но выдает ошибку, что это .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:

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

<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>