在嵌套的div中按类获取元素

时间:2017-06-23 20:14:11

标签: jquery

点击“编辑”课后,我需要使用jquery获取特定的最接近的消息输入文本。

注意这段代码是乘以

$(".message-input").text()

对我不好..

这是代码:

<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:2)

这段代码说的是:

点击此.edit元素,在最近的父div之前找div查找.message-input

&#13;
&#13;
$(".edit").on("click",function(){
  var myText = $(this).closest("div").prev("div").find(".message-input").html();
  console.log(myText);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

假设您重复发布的结构,这是一种方式:

    $(".edit").click(function(){
        var text = $(this).closest("div.3").find(".message-input").text();
        console.log(text)
    })

示例:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 1</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div><div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 2</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div><div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 3</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>
function tambahketua() {
  if (isset($_POST["reg"])) {
    $config['upload_path'] = './asset/img/foto/';
    $config['allowed_types'] = 'gif|jpg|png|jpeg|pdf|doc|xml|docx|GIF|JPG|PNG|JPEG|PDF|DOC|XML|DOCX|xls|xlsx';
    $config['max_size'] = 200048;

    $this->upload->initialize($config);

    if (!$this->upload->do_upload('attachment')) {
      $error = array('error' => $this->upload->display_errors());
     // var_dump($error); 
    } else {
      $fileData = $this->upload->data();
      $data['foto'] = $fileData['file_name'];
      $this->doResize($fileData['file_name']);
    }
    $insertedFirstImage = $this->miniatur_model->insertPeserta($data);
    if ($insertedFirstImage) {
      // Upload Second Image on Success
      if (!$this->upload->do_upload('fotoktmanggota1')) {
        $error = array('error' => $this->upload->display_errors()); 
      } else {
        $fileData = $this->upload->data();
        $data['foto'] = $fileData['file_name'];
        $this->doResize($fileData['file_name']);
      }
      $insertedSecondImage = $this->miniatur_model->insertPeserta($data);
     /*---------------------------------------*/
   } else{
     echo "Image insertion Failed in database";
   }
 }
 $this->load->view('pendaftaran');
}

function doResize($filename) {
  $sourcePath = './asset/img/foto/' . $filename;
  $targetPath = './asset/img/foto/thumb/thumb_' . $filename;

  $config_manip = array(
      'image_library' => 'gd2',
      'source_image' => $sourcePath,
      'new_image' => $targetPath,
      'maintain_ratio' => true,
      'width' => 150,
      'height' => 150
  );
  $this->image_lib->initialize($config_manip);
  $this->load->library('image_lib', $config_manip);


 if (!$this->image_lib->resize()) {
   echo $this->image_lib->display_errors();
   exit;
 }
 // clear //
 // $this->image_lib->clear();
}