Создать ссылку из <span>

Question

Я пытаюсь заставить это работать, но я не знаю, как получить значение из <span class="lsku"> value </span> и добавить его в качестве суффикса после URL. например: domain.com / link- значение

function changespan() {
  var spans = document.querySelectorAll('span.lsku');
  for (var i = spans.length; i--;) {
    var a = document.createElement('a');
    a.href = $(".link2part").attr('href');
    spans[i].appendChild(a).appendChild(a.previousSibling);
  }
}

changespan();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="domain.com/link-" class="link2part"></a>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">50</span></div>
    <div class="divTableCell">name 1</div>
    <div class="divTableCell"><span class="linkview">view</span>
    </div>
  </div>
</div>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">60</span></div>
    <div class="divTableCell">name 2</div>
    <div class="divTableCell"><span class="lsku">view</span>
    </div>
  </div>
</div>

ПОСМОТРЕТЬ ЭТО С JSFIDDLE. NET

Answer 1

Я предполагаю, что в вашем примере есть опечатка, а во втором блоке div второй класс должен иметь класс linkview вместо lsku. Если это так, то будет работать следующее.

$('span.linkview').html(function(i, h) {
  return $("<a/>", {
    html: h,
    href: 'domain.com/link-' + $(this).closest('div.divTableRow').find('span.lsku').text()
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="domain.com/link-" class="link2part"></a>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">50</span></div>
    <div class="divTableCell">name 1</div>
    <div class="divTableCell"><span class="linkview">view</span>
    </div>
  </div>
</div>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">60</span></div>
    <div class="divTableCell">name 2</div>
    <div class="divTableCell"><span class="linkview">view</span>
    </div>
  </div>
</div>

Answer 2

Я думаю, вы могли бы установить свойство value для тега span и передать это свойство в этом разделе:

a.href = $(".link2part").attr('href');

Примерно так:

a.href = $(".link2part").attr('href' + 'value');

И тег span должен получить свойство value с данными значения, которые вы хотите. Как это:

<div class="divTableCell"><span class="lsku" value="view">view</span></div>

Answer 3

Я думаю, что вы ищете textContent или innerText:

function changespan() {
  var spans = document.querySelectorAll('span.lsku');
  for (var i = spans.length; i--;) {
    var a = document.createElement('a');
    a.href = $(".link2part").attr('href');
    spans[i].appendChild(a);
    a.href = a.href + spans[i].textContent;
    a.textContent = spans[i].textContent;
  }
}

changespan();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="domain.com/link-" class="link2part"></a>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">50</span></div>
    <div class="divTableCell">name 1</div>
    <div class="divTableCell"><span class="linkview">view</span>
    </div>
  </div>
</div>

<div class="divTableBody">
  <div class="divTableRow">
    <div class="divTableCell"><span class="lsku">60</span></div>
    <div class="divTableCell">name 2</div>
    <div class="divTableCell"><span class="lsku">view</span>
    </div>
  </div>
</div>