jqueryの1つの部門で特定の詳細を取得する方法

Question

ここでは2つのプロパティの詳細があります。

最初のプロパティの連絡ボタンmyFunction()をクリックすると、プロパティ名3BHK Individual House for SELL in JayanagarとプロパティID 1を使用したいと考えています。

私が2番目のプロパティの連絡ボタン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>

$(this)

Answer 1

1. 動くコードをうまく参照するか、なしID
2. divには値はありませんが、text（）またはhtml（）があります
3. use type =ボタンjQueryの `on`の方法を使用し、イベントをバインドするには、フォーム/ページ

$(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>

Answer 2

clicked.Inがperformed.so可変thatにおけるDOMにおけるこのmyfuntion(this) .Then this宣言のような機能のある適用しない宣言thisことなく機能をonclickのどのボタン指します。

そして、クリックされたボタンで尊敬内側の要素に一致するようにDIVとfind()の親に一致するようにclosest()のjquery機能とfind()方法 closest()に適用されます。

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の簡単なごproblem.youを解決するようにjqueryのスクリプトを試してみてください$(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が

使用UNIQUE IDをすべてのボタンにアクセスするためのクラスを使用するHTML

のうち、クエリで

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>