Как применить класс, основанный на верхнем или нижнем регистре содержимого

Question

Я пытаюсь выбрать несколько <div> элементов с классом .choice, а затем проверить, все ли содержимое в верхнем регистре ИЛИ если все содержимое в нижнем регистре. Исходя из того, что все его содержимое строчные или прописные, я хочу применить класс CSS.

Я пытался использовать Jquery / Javascript, чтобы сделать это, однако я очень плохо знаком с обоими языки.

Я использовал Jquery в соответствии с:

$(".choice").text()
// and also
$(".choice").text().isUppercase().addClass()

Но я почти уверен, что не могу использовать JavaScript и Jquery таким образом .

Answer 1

Для этого вы можете предоставить функцию addClass(), которая проверяет регистр текста в текущем элементе и возвращает класс для добавления на основе того, что он находит. Попробуйте это:

$(".choice").addClass(function() {
  var t = $(this).text();
  if (t.toUpperCase() === t) 
    return 'upper';
  else if (t.toLowerCase() === t)
    return 'lower'    
});

.upper { color: #C00; }
.lower { color: #0C0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choice">ALL UPPERCASE</div>
<div class="choice">Both Cases</div>
<div class="choice">all lowercase</div>

Обратите внимание, что условие if можно сократить, используя приведенный ниже троичный оператор. Это личное предпочтение, если вы предпочитаете краткость, а не читабельность:

return t.toUpperCase() === t ? 'upper' : t.toLowerCase() === t ? 'lower' : null;