javascript – 如何从具有相同类的div获取文本值,并在另一个div中显示？

示例：http://codepen.io/agentmi6/pen/JoZZWm

当我点击[]图标时,如何在灰色div中显示绿色div的文本？我尝试了很多不同的场景,但都没有用,有人能给我一些指示,我怎么能这样做,我真的很感激.

    <div id="wrapper">
      <div class="container">
        <div class="first" id="f">
          <div class="set">+</div>
          this is the 1st element
        </div>
        <div class="first" id="s">
          <div class="set">+</div>
          this is the 2nd element
        </div>
        <div class="first" id="t">
          <div class="set">+</div>
          this is the 3rd element
        </div>
      </div>

      <div id="cc"></div>
    </div>

CSS

.first{
  margin-top:5px;
  border:1px solid black;
  width:190px;
  height:40px;
  background-color:green;
}

#cc{
  margin-top:5px;
  width:190px;
  height:40px;
   border:1px solid black;
  background-color:grey;
}

.set{
  cursor:pointer;
  color:#fff;
  font-size:33px;
  float:right;
  border:1px solid white;
}

解决方法:

您必须获取.first div的文本,我建议您将文本放入标记中以便获取它,因此您无法获得.get按钮.
这是新的JavaScript

$(document).ready(function(){

  $('.set').click(function(){

    // Get the text inside the span in the parent .first of the clicked .set button
    var text = $(this).parent('.first').find('span').text();
    $('#cc').text(text);
 });

});

HTML看起来像这样

<div class="container">
  <div class="first" id="f">
    <div class="set">+</div>
    <span>this is the 1st element</span>
  </div>
  <div class="first" id="s">
    <div class="set">+</div>
    <span>this is the 2nd element</span>
  </div>
  <div class="first" id="t">
    <div class="set">+</div>
    <span>this is the 3rd element</span>
  </div>
</div>
<div id="cc"></div>

这是一个更新的CodePen