如何在jquery中的一个部门中获取特定细节

时间：2016-12-31 06:08:16

标签： javascript jquery

这里我有两个属性详细信息。

如果我点击第一个属性联系按钮myFunction()，则表示我想要使用属性名称3BHK Individual House for SELL in Jayanagar和属性ID 1。

如果我点击第二个属性联系按钮myFunction()，则表示我想要使用属性名称10BHK Individual House for SELL in Jayanagar和属性ID 2。

我该怎么做？

＆＃13;
＆＃13; 
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);

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

2 个答案:

答案 0 :(得分：0)

$(this)引用单击了哪个按钮。未执行声明this的onclick函数。在此函数中应用myfuntion(this)。然后this在变量中声明 DOM 中的that。

然后使用 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>

或  尝试使用像这样的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])
    })
    })

更新了问题的答案

property_name的类名是拼写错误"="，而且html内容都是3BHK .i已经更正了。请参阅下面的代码段。它可以使用查询

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>

答案 1 :(得分：0)

  1. 将代码移出HTML
  2. 使用课程访问所有按钮
  3. 使用UNIQUE ID或无ID
  4. div没有值但有text（）或html（）
  5. 使用type =按钮不提交表单/页

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

相关问题
最新问题