Как взять конкретные детали в одном подразделении в jquery

Здесь у меня есть две детали собственности.

Если я нажму кнопку первый контакт свойстваmyFunction(), это означает, что я хочу взять имя свойства 3BHK Individual House for SELL in Jayanagarи идентификатор 1свойства .

Если я нажму кнопку второй контакт свойстваmyFunction(), это означает, что я хочу взять имя свойства 10BHK Individual House for SELL in Jayanagarи идентификатор 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>

субикшан м, 31.12.2016 в 06:08 (источник)

2 ответа

$(this) смотрите, какая кнопка нажата.В onclick функция без объявления thisне выполняется.поэтому примените С в функции, как это myfuntion(this).Затем thisобъявите переменную thatв DOM .

А затем применить с jqueryфункцией ближайшего() и найти() метод
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])
    })
    })

Обновленный ответ на upadated вопрос

имя класса property_nameошибки заклинания is "="и оба html-содержимого3BHK.меня поправили. см.ниже фрагмент.Его работа с запросом

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>

перемещение кода из HTML
используйте класс для доступа ко всем кнопкам
использование уникальных идентификаторов или отсутствие идентификаторов
div не имеет значения, но имеет text () или html()
используйте кнопку 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>