在div上获取并设置文本

时间:2014-04-30 14:03:31

标签: javascript jquery html css

我有一个带有文本的几个div的面板,我想得到这些div的文本并以模态显示所有内容。 div的内容类似于Task1,Planning或URI。

主要结构:

 <div id="tasksList" class="row"> //The row of panels
  <div class="col-xs-6 col-sm-4 col-md-3"> /The panel
    <div id="1" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">

      <div class="ptitle">Task 1</div>

      <div class="optiongroup">  <span  data-toggle="modal" id="show" class="glyphicon glyphicon-edit yellow"></span>


<div class="miniswitch">
    <input type="checkbox" data-id="12">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
  </div>

    </div>
    </div>
    <div class="panel-body">
      <div class="row">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12" id="uri" value="uri">
          <strong>URI:</strong>&nbsp;/cron/test/task1
        </div>
      </div>
    </div>
    </div>
  </div>

... (another div for the second panel)

模态的JS(模板是模态的内容开始的地方):

 $(function() {
    $('#show').avgrund({
      height: 200,
      holderClass: 'custom',
      showClose: true,
      showCloseText: 'close',
      onBlurContainer: '.container',
      template: '    <div class="modal-content">' 
    +
     + '<div class="modal-header">'
      + ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
     + '<h4 id="taskDetailTitle" class="modal-title">$("#uri").text()</h4>'
     + '</div>'
   + ' <div class="modal-body">'
    +    '<div class="row-fluid" style="padding-bottom: 0px;">'
+ '<form id="taskForm" class="form-horizontal" role="form">'
 +         '<input type="hidden" name="id" value="2"> '
  +      '  <div class="form-group">'
   +       '  <label for="inputName" class="col-xs-3 col-sm-3 col-md-3 control-label">Name</label>'

    });
  });

1 个答案:

答案 0 :(得分:0)

您可以使用.innerText获取div的文本,然后可以使用.text()

在div上设置文本
<html>
<head>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<div id="load">Hola</div>
</body>
<script type="text/javascript">
//Get text
alert($("#load")[0].innerText);
//Input text
$("#load").text('Write');
//Get the input
alert($("#load")[0].innerText);
</script>
</html>