Форум

Alexandr_Prylipko · #1 (**permalink**) 07.02.2015, 01:27

Всем привет. Помогите пожалуйста, немного не разберусь.
Хочу обернуть каждое число (value контейнера), в тег
написал так:

jQuery(document).ready( function($) {
    var $html = '';
    var $i = [0, 1, 2, 3];
    $('.my-count > div').each( function(){
        var box_size = $(this).val().length;
        $html = $(this).text();
         if( box_size >=1 && box_size <=3 && box_size <= 4){
             $(this).html('<span>'+$html[0]+'</span><span>'+$html[1]+'</span>');
         } else if ( box_size >=1 && box_size >=2 && box_size <= 4 ){
             $(this).html('<span>'+$html[0]+'</span><span>'+$html[1]+'</span><span>'+$html[2]+'</span>');
         } else if ( box_size >=1 && box_size >=2 && box_size >=3 ){
             $(this).html('<span>'+$html[0]+'</span><span>'+$html[1]+'</span><span>'+$html[2]+'</span><span>'+$html[3]+'</span>');
         } else {
             $(this).html('<span>'+$html+'</span>');
         }

    });
});

Обернуло все элементы в тег

<div class="my-count">
        <div ><span> 0  </span></div>
        <div ><span> 00 </span></div>
        <div ><span>  0 </span></div>
        <div ><span>  0 </span></div>
    </div>

Делал тестовый, ввел 4 цыфры в блок и написал для 4-х элементов, обернуло каждый, а когда пишу условие, такая вот не хорошая вещь получается.

Прошу помощи, новичек в JQ & JS

Заранее благодарю. С ув. Александр.

freee · #2 (**permalink**) 07.02.2015, 03:57

<html>
<head>
</head>
<body>


<div class="my-count">
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
    </div>

<script>

d=document.querySelector("div")
d.innerHTML=d.innerHTML.replace(/>([^<]+)<\s*\//g, "><span style='background: red'>$1</span></")

</script>

</body>
</html>

Alexandr_Prylipko · #3 (**permalink**) 07.02.2015, 11:17

Попробовал на своем примере, никакой реакции.

freee · #4 (**permalink**) 07.02.2015, 13:31

Да, извиняюсь, неправильно понял вот эту фразу: "каждое число".

<html>
<head>
</head>
<body>
 
 
<div class="my-count">
        <div >foo1</div>
        <div >2bar3</div>
        <div >345</div>
        <div >47896baz</div>
    </div>
 
<script>



function gen(){ return Math.floor(Math.random()*9) }
function genColor(){return "#"+gen()+gen()+gen()}
function wrap(a,b){ 
  if(b) return ">"+b.replace(/\d/g, function(b){return "<span style='color: white; background: "+genColor()+"; font-size: "+3+gen()+"'>"+b+"</span>"})+"</"
}

d=document.querySelector("div")
d.innerHTML=d.innerHTML.replace(/>([^<]+)<\s*\//g, wrap)
 
</script>
 
</body>
</html>

Alexandr_Prylipko · #5 (**permalink**) 07.02.2015, 14:56

Спасибо большое, сделал пример все работает. Но бэк-енд пишу на php. Распарсиваю JSON Object, и вывожу через echo обработаные данные и проблема в том, что когда пишу

s = $('#my-block > div').text().length;

Alert выводит что у меня в строке 22 - 23 символа, то-есть лишние пробелы откуда-то берутся. Пробовал решить задачу через strim() тоже без толку, пробелы так и остаются.
Сам уже немного запутался.

freee · #6 (**permalink**) 07.02.2015, 15:19

Alexandr_Prylipko,
В php не шарю, помочь ничем не могу, извиняй. Средствами js можно убрать пробелы вот так

alert("foo bar baz".replace(/ +/g, ""))

//>>>> foobarbaz

Любые пробельные символы вот так:

alert("foo	bar baz".replace(/\s+/g, ""))

//>>>> foobarbaz

но какие там у тебя лишние, хз

Alexandr_Prylipko · #7 (**permalink**) 07.02.2015, 15:21

Спасибо большое за помощь. Попробую далее сам разобраться

Форум

Справочник

Discord чат

Курсы javascript