如何在jquery

中的一個部門採取具體細節在這裏我有兩個屬性的詳細信息。如何在jquery

如果我點擊第一個屬性聯繫人按鈕myFunction()這意味着我想要使用屬性名稱3BHK Individual House for SELL in Jayanagar和屬性ID 1。

如果我點擊第二個屬性聯繫人按鈕myFunction()這意味着我想要取屬性名稱10BHK Individual House for SELL in Jayanagar和屬性ID 2。

我該怎麼做？

var htmlString=''; 
 
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>'; 
 
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>'; 
 

 
$('#prop_listing').empty().append(htmlString); 
 

 

 

 

 
function myFunction(that) { 
 
    name = $(that).closest('.prptylstt').find('.property_name').html(); 
 
    console.log(name); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="prop_listing"></div>

來源

2016-12-31 subikshan M

要綁定的事件，使用jQuery'on'方法。然後，它內部的$（this）將引用被點擊的元素。然後使用'$（this）.closest（'。prptylstt'）。find（'。property_name'）。text（）' – Tushar

您最好使用#id而不是.class來獲取元素。因爲，可能有多個元素具有相同的類名... –

嗨Tusha我試過我們的代碼，但我沒有得到任何東西，你能更新我的小提琴 –

招碼出HTML
的使用一個類來訪問所有的按鈕
使用唯一的ID或無ID
div不具有值，但具有文本（）或html（）
use type =按鈕不提交表單/頁

$(function() { 
 
    $(".prlstbtn").on("click", function(e) { 
 
    var $list = $(this).closest(".prptylstt"), 
 
     name = $list.find(".property_name").text(), 
 
     id = $list.find(".p_id").attr("href").split("id=")[1]; 
 
    console.log(id, name); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="row prptylstt"> 
 
    <div class="col-sm-4" style="padding-left:0px;padding-right:0px;"> 
 
    <a class="p_id" href="propertydetails.php?id=1"></a> 
 
    </div> 
 
    <div class="col-sm-8" style="padding-left:20px;"> 
 
    <h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SALE in Jayanagar</h4> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <p class="parclr">Price</p> 
 
     <h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4> 
 
     </div> 
 
     <div class="col-sm-2 divbrdr"> 
 
     <p class="parclr">Sqft</p> 
 
     <h4 class="colrh">56565</h4> 
 
     </div> 
 
     <div class="col-sm-4 divbrdr"> 
 
     <p class="parclr">Avaliable From</p> 
 
     <h4 class="colrh">2016-12-16</h4> 
 
     </div> 
 
     <div class="col-sm-3 divbrdr"> 
 
     <p class="parclr">PostedBy</p> 
 
     <h4 class="colrh">Agent</h4> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row" style="padding-top: 5px;"> 
 
     <div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a> 
 
     </div> 
 
     <div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a> 
 
     </div> 
 
     <div class="col-sm-3 "></div> 
 
     <div class="col-sm-3 "> 
 
     <div class="contact" style="text-align:center;"> 
 
      <button type="button" class="btn btn-default prlstbtn">Contact</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row prptylstt"> 
 
    <div class="col-sm-4" style="padding-left:0px;padding-right:0px;"> 
 
    <a class="p_id" href="propertydetails.php?id=2"></a> 
 
    </div> 
 
    <div class="col-sm-8" style="padding-left:20px;"> 
 
    <h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SALE in Jayanagar</h4> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <p class="parclr">Price</p> 
 
     <h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4> 
 
     </div> 
 
     <div class="col-sm-2 divbrdr"> 
 
     <p class="parclr">Sqft</p> 
 
     <h4 class="colrh">56565</h4> 
 
     </div> 
 
     <div class="col-sm-4 divbrdr"> 
 
     <p class="parclr">Avaliable From</p> 
 
     <h4 class="colrh">2016-12-16</h4> 
 
     </div> 
 
     <div class="col-sm-3 divbrdr"> 
 
     <p class="parclr">PostedBy</p> 
 
     <h4 class="colrh">Agent</h4> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row" style="padding-top: 5px;"> 
 
     <div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a> 
 
     </div> 
 
     <div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a> 
 
     </div> 
 
     <div class="col-sm-3 "></div> 
 
     <div class="col-sm-3 "> 
 
     <div class="contact" style="text-align:center;"> 
 
      <button type="button" class="btn btn-default prlstbtn">Contact</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-31 06:45:20 mplungjan

感謝您的代碼適合我 –

$(this)參閱哪個按鈕clicked.In的onclick而不聲明this功能不performed.so與適用於這樣myfuntion(this)。然後this函數聲明在一個變量中that DOM 。

，然後用closest()jquery功能和find()方法 closest()應用於匹配div和find()的父與點擊按鈕推崇內部元件相匹配。

function myFunction(that) { 
 

 
var name = $(that).closest('.prptylstt').find('.property_name').html(); 
 
    var id =/(id=)(\w+)/g.exec($(that).closest('.prptylstt').find('.p_id').attr('href')) 
 
    console.log(name); 
 
    console.log(id[2]) 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div class="row prptylstt" id="prptylstt"> 
 
    <div class="col-sm-4" style="padding-left:0px;padding-right:0px;"> 
 
    <a class="p_id" href="propertydetails.php?id=1"></a> 
 
    </div> 
 
    <div class="col-sm-8" style="padding-left:20px;"> 
 
    <h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SELL in Jayanagar</h4> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <p class="parclr">Price</p> 
 
     <h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4> 
 
     </div> 
 
     <div class="col-sm-2 divbrdr"> 
 
     <p class="parclr">Sqft</p> 
 
     <h4 class="colrh">56565</h4> 
 
     </div> 
 
     <div class="col-sm-4 divbrdr"> 
 
     <p class="parclr">Avaliable From</p> 
 
     <h4 class="colrh">2016-12-16</h4> 
 
     </div> 
 
     <div class="col-sm-3 divbrdr"> 
 
     <p class="parclr">PostedBy</p> 
 
     <h4 class="colrh">Agent</h4> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row" style="padding-top: 5px;"> 
 
     <div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a> 
 
     </div> 
 
     <div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a> 
 
     </div> 
 
     <div class="col-sm-3 "></div> 
 
     <div class="col-sm-3 "> 
 
     <div class="contact" style="text-align:center;"> 
 
      <button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row prptylstt" id="prptylstt"> 
 
    <div class="col-sm-4" style="padding-left:0px;padding-right:0px;"> 
 
    <a class="p_id" href="propertydetails.php?id=2"></a> 
 
    </div> 
 
    <div class="col-sm-8" style="padding-left:20px;"> 
 
    <h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SELL in Jayanagar</h4> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <p class="parclr">Price</p> 
 
     <h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4> 
 
     </div> 
 
     <div class="col-sm-2 divbrdr"> 
 
     <p class="parclr">Sqft</p> 
 
     <h4 class="colrh">56565</h4> 
 
     </div> 
 
     <div class="col-sm-4 divbrdr"> 
 
     <p class="parclr">Avaliable From</p> 
 
     <h4 class="colrh">2016-12-16</h4> 
 
     </div> 
 
     <div class="col-sm-3 divbrdr"> 
 
     <p class="parclr">PostedBy</p> 
 
     <h4 class="colrh">Agent</h4> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row" style="padding-top: 5px;"> 
 
     <div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a> 
 
     </div> 
 
     <div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a> 
 
     </div> 
 
     <div class="col-sm-3 "></div> 
 
     <div class="col-sm-3 "> 
 
     <div class="contact" style="text-align:center;"> 
 
      <button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>

或與像this.It的容易解決的jQuery腳本試試你的problem.you可以使用$(this)

$(document).ready(function(){ 
    $('.btn-default').click(function(){ 
     var name = $(this).closest('.prptylstt').find('.property_name').html(); 
     var id =/(id=)(\w+)/g.exec($(this).closest('.prptylstt').find('.p_id').attr('href')) 
    console.log(name); 
    console.log(id[2]) 
    }) 
    })

爲upadated問題

更新答案

property_name的類名稱是拼寫錯誤"="，而且這兩個html內容都是3BHK .i被糾正了。看看下面的snippet.Its制定出與查詢

var htmlString=''; 
 
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class="property_name">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>'; 
 
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name">10BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>'; 
 

 
$('#prop_listing').empty().append(htmlString); 
 
$(document).on('click','.btn',function(){ 
 
    name = $(this).closest('.prptylstt').find('h4').eq(0).html(); 
 
    console.log(name); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="prop_listing"></div>

來源

2016-12-31 06:25:34 prasanth

這已在評論中提及。至少展示瞭如何將myFunction從內聯移動到不顯眼 – mplungjan

@subikshanM查看我的upadted答案 – prasanth

回答

相關問題