发现不工作jQuery中

Question

选择从DOM数据，我需要

• 我需要从类events_links访问HREF。

HTML代码

<div class="row flush frt" itemscope="" itemtype="http://schema.org/Event"> 
    <div class="12u"> 
    <div class="evntblk"> 
    <a itemprop="url" class="events_links" href="/dailymail-ideal-homeshow"> 
     <h2 class="lnh1" itemprop="name">Ideal Home Show - London</h2> 
    </a> 
    <div style="display:block; float:right; width:auto; color:#7c7c7c;"><a href="javascript:void(0);" class="favourate" title="Add to Favorites" id="fav8470" data-sess_id="8470" data-name="Ideal Home Show - London" data-city="London" data-country="United Kingdom" data-event_url="dailymail-ideal-homeshow"></a></div> 
    <span itemprop="startDate" class="startdates" content="2015-03-20">20 Mar-06 Apr 2015</span><span itemprop="endDate" class="enddates" content="2015-04-06"></span><br><span itemprop="location" itemscope="" itemtype="http://schema.org/Place"><span itemprop="name" style="display:none">Olympia Exhibition Centre</span><span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality" class="eventcity">London</span>, 
    <span itemprop="addressCountry" class="eventcountry">UK</span></span></span> 
    <p class="tal" style="overflow:hidden">The ZEE Asian Pavilions are a celebration of British Asian Culture, that encapsulates Asian food, Asian fashion,...<br><span style="background: none repeat scroll 0 0 #ECECEC; border-radius: 5px; color: #333333; display: inline-block; font-size: 0.8em;line-height: 13px; margin: 5px 2px 0 0 !important; padding: 5px 8px;">Home Furnishings &amp; Home Textiles</span></p> 
    </div> 

<div class="row flush footer"><div class="12u"><a class="button button-blue small">View Details</a></div></div> 

js代码

$('.small').click(function() 
{ 
    alert("test"); 
    window.location.href = $(this).find(".events_links").attr("href"); 
}); 

快照html元素的

• 我试图访问与.parent（）但它不工作。

O/P

• 我需要通过点击级小型访问events_links类，这样我会 从html元素得到HREF。

• 任何建议是最受欢迎的。

Answer 1

简单的解决方案只得到相关的URL与parent()功能：

$('.small').click(function() 
{ 
    window.location.href = $(this).parent().parent().parent().find(".events_links").attr("href"); 
}); 

因为你是三级下方。

find()将开始从给定对象向下搜索层次结构。

但如前所述，因为你改变你的HTML布局，也许删除或添加一个div容器，这将失败，因为很快。

这会是更好的做法，让你的divs包含url的唯一id或存储链接的按钮的数据属性。

因此，举例来说，如果你的HTML代码，你有这个

<div id="link12" class="event_links" href="FOUND THIS!"> 
    <div class="whatever"> 
     <div class="anotherone"> 
      <div class="button small" data-link="link12" data-href="FOUND THIS HERE TOO!"> 
       CLICK HERE 
      </div> 
     </div> 
    </div> 
</div> 

点击广告代码可以通过2种方法访问网址：

$('.small').click(function() 
{ 
    // METHOD 1: get by storing unique id with button 
    alert($('#'+$(this).attr('data-link')).attr("href")); 

    // METHOD 2: same effect, but shorter storing href at button 
    alert($(this).attr('data-href')); 

}); 

Answer 2

试试这个

$('.small').click(function() { 
    alert("test"); 
    window.location.href = $(".events_links").attr("href"); 
}); 

Answer 3

你可以试试这个：在当前.box.panel

$('.small').click(function() { 
    alert("test"); 
    window.location.href = $(".evntblk .events_links").attr("href"); 
}); 

Answer 4

如果你需要得到单.event_links只有HREF对象做：

$('.small').click(function() 
    { 
     alert("test"); 
     window.location.href = $(this).closest(".box.panel").find(".events_links").attr("href"); 
    }); 

最接近会让你第一个瑕疵nt元素匹配选择器。这样，如果您有任何其他.event_links不在此面板中，它们将被跳过。如果你使用parent（），你将被迫在.small和它的父母之间保持相同的HTML结构。

Answer 5

首先，尝试加载基于css类的url是个不好的习惯。这是因为很可能您在单个页面上重复使用css类，导致多个锚点选择。

但是你可以做到以下几点：

$('.small').click(function() 
{ 
    var btn = $(this); 

    // find the closest element of click button with class 'event-block' 
    // find the element with class 'events_links' 
    // change window location to value at href 
    window.location.href = btn.closest('.event-block').find('.events_links').attr("href"); 
}); 

Answer 6

我建议数据ATTR在这种情况下，你不想依赖代码结构和CSS。

<div class="row flush footer"> 
    <div class="12u"> 
     <a class="button button-blue small" data-relative-path="some-location">View Details</a> 
    </div> 
    </div> 

而且

$('.small').click(function(){ 
    window.location.href = $(this).data('relative-path'); 
});