如何使用$ this之类的方法从DIV中选择数据？

时间：2018-09-07 20:17:59

标签： javascript jquery html

给出了以下代码段：

<div class="container-fluid" id="networdapp">
  <div class="row" >
    <div v-for="result in results" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light">
         <div class="card-header text-center">  {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text"  v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="#" class="btn btn-info">Details</a>
             </div>
         </div>
      </div>
  </div>
</div>

如何从div中的随机div /未知位置读取数据？我不能使用PHP。

此<div ... id="networdapp">的创建取决于数据库的结果。单击“详细信息”按钮时，如何从随机div中获取数据{{result.title}}？

我尝试使用JQuery来获取它，但最终从所有DIV中选择了所有数据。然后我在考虑是否可以使用$this来做到这一点，但我尝试了但仍然无法做到。

编辑：有生成的html代码：

  <!DOCTYPE html>
  <html lang="en">

  <head>
  <meta charset="utf-8">
      <title>Website Test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <link rel="stylesheet"             href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        </head>

        <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">WebSite for testing</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
          </button>

    <div class="collapse navbar-collapse" id="navbarWw1">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="map">Map</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about">About</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()"  placeholder="Find your next memories!">
      </form>
    </div>
        </nav>

    <div class="container-fluid" id="networdapp" style="display:none;">
       <div class="row" >
          <div v-for="result in results" class="col-sm-6" >
            <div class="card m-3 h-240  bg-light" >
               <div class="card-header text-center" > {{ result.title }}             </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" >Details</a>
             </div>
         </div>
            </div>
        </div>
        </div>
    </body>


    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

  function myFunction() {
      var input , filter , OK = false ;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
  if(filter.length > 0 ) {
  document.getElementById("networdapp").style.display = "";
  $( ".col-sm-6" ).each(function( index ) {
  if ($(this).text().toUpperCase().indexOf(filter) > -1){
  this.style.display="";
  }else{
  this.style.display="none";
  //document.getElementById("networdapp").style.display = "none";
  }
  });
  }
  else{
  document.getElementById("networdapp").style.display = "none";
  }
  }

    </script>

    <script type="text/javascript">
    const vm = new Vue({
      el: '#networdapp',
      data: {
        results:[]
       },
       mounted() {
         axios.get('/getJson')
       .then(response => {
          this.results = response.data;
       })
       .catch( e => {
         console.log(e);
       });
      }
    });

    </script>

  </html>

5 个答案:

答案 0 :(得分：0)

div的类为card-header，所以... 

$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText

但是，您希望单击该按钮。这样看起来就像... 

//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
  //prevent the link so the runnable snippet stops jumping back to the top
  e.preventDefault();

  //find the parent div with the card class that is the parent to both
  //the link and the title
  var $card = $(this).closest('.card');
  //find the nested card header in the card clicked
  var $cardHeader = $card.find('.card-header');
  
  //console log the text
  console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
  <div class="row">
    <div v-for="result in results" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light">
         <div class="card-header text-center">  title 1 </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text"  v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="#" class="btn btn-info">Details</a>
             </div>
         </div>
      </div>
  </div>
  <div class="row">
    <div v-for="result in results" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light">
         <div class="card-header text-center">  title 2 </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text"  v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="#" class="btn btn-info">Details</a>
             </div>
         </div>
      </div>
  </div>
  <div class="row">
    <div v-for="result in results" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light">
         <div class="card-header text-center">  title 3 </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text"  v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="#" class="btn btn-info">Details</a>
             </div>
         </div>
      </div>
  </div>
</div>

答案 1 :(得分：-1)

使用jQuery：

$("#networdapp .card-header.text-center").html()

所以：

$(".btn.btn-info").click(function(){
    console.log( $("#networdapp .card-header.text-center").html() );
})

或者：

$(".btn.btn-info").click(function(){
    console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

答案 2 :(得分：-1)

您可以选择div，然后使用上下文选择按钮r中的其他元素。

$(".card").each(function(){
   var that = this; // <--- the current div
   var header = $(that).find(".card-header");
   var detailBtn = $(that).find(".btn-info");

   // set event handlers here
   // Example:
   detailBtn.click(function(){
     alert(header.text());
   });
});

这是工作中的Example

答案 3 :(得分：-1)

使用jquery 

$(this).parents("#networdapp").find(".card-header.text-center").text();

要删除不必要的空格，可以使用修剪

$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());

答案 4 :(得分：-2)

这是代码：

$('.btn.btn-info').click(function(){
    $('.card-header.text-center').each(function(){
        console.log(
            $(this).text() // check console when you clicked details
        );
    });
});
相关问题
最新问题