Форум

Кирюха =) · #1 (**permalink**) 17.05.2015, 19:44

<div class="somediv">
 <a href="#">1</a>
 <a href="#">2</a>
 <a href="#">3</a> 
 <a href="#">4</a> 
 5
</div>

Всем привет. Встала передо мной такая задача, нужно как нибудь текст в div'е с классом somediv обернуть в span а остальную разметку в этом div'е не трогать. В данном случае нужно обернуть в span текст "5". Хочеться нормально как то решить это, а не регулярками, прошу помогите.

laimas · #2 (**permalink**) 17.05.2015, 21:10

Страничный навигатор?

Decode · #3 (**permalink**) 17.05.2015, 21:53

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    span {
      color: red;
    }
  </style>
</head>
<body>
  <div class="somediv">
    <a href="#">1</a><br/ >
    <a href="#">2</a><br/ >
    <a href="#">3</a><br/ >
    <a href="#">4</a><br/ >
    5<br/ >
    6<br/ >
    7<br/ >
    8<br/ >
  </div>
  
  <script>
    var div = document.querySelector('.somediv');

    Array.prototype.forEach.call(div.childNodes, function(item) {
      if(item.nodeType == 3 && item.data.match(/\S+/)) {
        var span = document.createElement('span');
        span.innerHTML = item.data;
        item.parentNode.replaceChild(span, item);
      }
    });
  </script>
</body>
</html>

рони · #4 (**permalink**) 17.05.2015, 22:32

Кирюха =),

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".somediv"), a = $("*",s).remove(), t = $.trim(s.text());
       s.wrapInner("<span/>").prepend(a);
       $("span:last",s).text(t);
       alert($("body").html())
});


  </script>
</head>

<body>
<div class="somediv">
 <a href="#">1</a>
 <a href="#">2</a>
 <a href="#">3</a>
 <a href="#">4</a>
 5
</div>


</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript