Как взять конкретные детали в одном подразделении в 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>

2 ответа

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

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