Содержимое от divs до textarea

Я хотел бы передать текст из всех div с определенным классом в текстовое поле на той же странице.Содержимое от divs до textarea

Как я могу это сделать?

, например:

< div class="test1" > Example1 < /div > 
< div class="test2" > Example2 < /div > 
< div class="test1" > Example3 < /div > 
< div class="test3" > Example4 < /div >

Я хотел бы передать содержание класса ДИВА test1 и в текстовом поле должны показать «example1» и «example3».

Любая помощь, пожалуйста! Javascript или PHP

джон

источник

2009-11-02 John

Это будет сделано довольно легко с помощью JQuery:

var newTextVal = ""; 
$('.text1').each(
    function() 
    { 
     newTextVal += $(this).text(); 
    } 
); 
$('textarea').val(newTextVal);

Это выше будет цикл по каждому элементу с классом «text1» и добавить это значение узла текста в текст в текстовом поле.

источник

2009-11-02 23:39:37

Похоже, что его можно улучшить. Я бы предложил сохранить значение в строке или массиве строк и установить значение textarea только в конце, а не переназначать его каждый раз по циклу. –

Абсолютно согласен. Я обновил до конца :) –

Я бы предложил использовать атрибут «id» для divs вместо класса. В принципе, вам нужно будет написать функцию JavaScript, которая использует GetElementById() или GetElementByObject().

Затем определите кнопку, которая вызывает эту функцию, передавая ей идентификатор div и идентификатор текстового поля. Наконец, установите значение объекта textarea в значение объекта div.

EDIT: Вот функция.

<script type="text/javascript"> 
function copyValues(idFrom, idTo) { 
    var objFrom = document.getElementById(idFrom); 
    var objTo = document.getElementById(idTo); 

    objTo.value = objFrom.value 
} 
</script>

На мероприятии вы хотите это вызвало:

copyValues("div1", "textarea1"); 
copyValues("div2", "textarea2"); 
copyValues("div3", "textarea3");

источник

2009-11-02 23:42:51 sohum

Это означало бы новый призыв copyValues для каждого div на странице, с которой вы хотели это сделать. Это может быстро выйти из-под контроля. –

Если вы ищете для чистого JavaScript это будет работать - хотя подобные вещи очень легко обрабатываются в рамках как JQuery:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript"> 

     function CopyDivsToTextArea() 
     { 
      var divs = document.getElementsByTagName("div"); 
      var textToTransfer = ""; 
      var pattern = new RegExp("test1"); 

      for(var i=0;i<divs.length;i++) 
      { 
      if(pattern.test(divs[i].className)) 
       { 
        textToTransfer += (divs[i].innerText || divs[i].textContent); 
       } 
      } 
     document.getElementById("ta").value = textToTransfer; 
     } 

    </script> 
</head> 
<body> 
<div class="test1" > Example1 </div > 
<div class="test2" > Example2 </div > 
<div class="test1" > Example3 </div > 
<div class="test3" > Example4 </div > 
<br /> 
<textarea id="ta" cols="50" rows="20"></textarea> 
<br /> 
<input type="button" id="btn" value="Button" onclick="CopyDivsToTextArea();" /> 
</body> 
</html>

источник

2009-11-02 23:49:10 brendan

Мне нравится отсутствие зависимости от библиотеки, но есть хрупкость с 'if (divs [i] .className ==" test1 ")' line: элементы могут иметь несколько классов CSS, поэтому вы должны протестировать это с помощью регулярное выражение или эквивалент вместо простого сравнения равенства. Кроме того, innerHTML, вероятно, является неправильным выбором, поскольку в текстовой области вы можете получить нежелательную HTML-надпись. Вместо этого вы можете использовать 'innerText' /' textContent': 'textToTransfer + = (divs [i] .innerText || divs [i] .textContent);'. 'innerText' и' textContent' не совсем эквивалентны, но могут быть достаточно хорошими. –

хорошие моменты Тим, обновленный пример - просто что-то я бросил вместе, а не на 100% проверял для всех сценариев. Благодаря! – brendan

+1 для элегантности и отсутствия требований к библиотеке :) –

ответ

Смежные вопросы