Javascript 如何用$this这样的东西从DIV中选择数据？

给定以下代码段：

<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有类卡头，所以

但是，您希望单击与按钮相关的按钮。这样看起来就像

//在容器上为所有按钮创建委托事件处理程序 $'networdapp'。在“单击”时，'.btn.btn info'，函数e{ //阻止链接，使可运行代码段停止跳回顶部 e、 防止违约； //查找具有卡类的父div，该卡类是两者的父级 //链接和标题 var$card=$this.closest'.card'； //在单击的卡片中查找嵌套的卡片标题 var$cardHeader=$card.find'.card header'； //控制台记录文本 log$cardHeader.text； }; 标题1

标题2

标题3

使用jQuery：

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

因此：

或：

---

您可以选择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());
   });
});

下面是一个使用jquery的工作

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

要删除不必要的空间，可以使用“修剪”

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

---

这将仅从第一行获取，而不是单击按钮的行。前两个示例是错误的，它们从第一行获取HTML，而不是从单击的行获取。@Barmar尝试将它们全部运行在一个小提琴中。他们工作得很好。你的小提琴只有一排！尝试在小提琴上添加第二行。@Barmar，在问题中，它说有多行吗？来自字典：令人烦恼的不敏感或理解缓慢。当我使用第一个命令时：window.alert$this.parentsnetwordapp.find.card-header.outerHTML；或窗口。警报$this.parentsnetwordapp.find.card-header.text-center.outerHTML；它显示未定义的…嗨，当我尝试：$.card.eachfunction{var that=this；//是的，它显示了。您期望的结果是什么？来自{result.title}的数据您正在使用一个框架来将其转换为数据？看起来您有一个模板引擎来将其转换为数据。但这不是它在问题上所说的。@Ibu看起来像角度。但是数据来自何处似乎与问题无关。在您的示例中，您应该显示多行，大多数answerers不明白您在做什么。所以真正的问题是如何将result.title转换为vue.js中的实际数据？这就是所有内容……正如我所说的

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

$(".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());
   });
});

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

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