javascript - 如何使用 jquery 根据第一次点击获取下一个元素的值

Question

我的代码是

<div>
     <h5>
        <a class="site-name">KGC Alpc</a>
     </h5>
     <h5>
         <small class="site-address">1-221, Mandera st, CA</small>
     </h5>
     <input type="hidden" class="geocodes" value="11.5,33.4">
</div>

<div>
     <h5>
        <a class="site-name">ABC Transports</a>
     </h5>
     <h5>
        <small class="site-address">1-555, XX Street, NJ</small>
     </h5>
     <input type="hidden" class="geocodes" value="18.5,13.4">
</div>

如果我点击第一个元素，我需要获取站点名称、站点地址和地理代码的值

我尝试过这样

$('.site-name').click(function(event){
        var siteName = $(event.target).text(); 
        var siteAddress = $(event.target).text(); 
    });

我可以从中获取站点名称，但无法获取站点地址和地理代码值。

请帮助我，

提前致谢!

Answer 1

试试这个代码。使用 parent() 和 next() 可以获得该值。

$(document).ready(function(){
    $('.site-name').click(function(event){
        var siteName = $(this).text(); 
        var address = $(this).parent().next()
        var siteAddress= $(address).find(".site-address").text(); 
        var geoCode = $(address).next("input").val();
        console.log(siteName);
        console.log(siteAddress);
        console.log(geoCode);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
     <h5>
        <a class="site-name">KGC Alpc</a></h5>
        <h5><small class="site-address">1-221, Mandera st, CA</small></h5>
        <input type="hidden" class="geocodes" value="11.5,33.4">
     </h5>
</div>

<div>
     <h5>
        <a class="site-name">ABC Transports</a></h5>
        <h5><small class="site-address">1-555, XX Street, NJ</small></h5>
        <input type="hidden" class="geocodes" value="18.5,13.4">
     </h5>
</div>

希望这对您有帮助。