發現不工作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'); 
});