查找无法从jQuery中的dom中选择数据

Question

我需要的

• 我需要从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容器，此操作将失败。

最好给您的div包含网址唯一ID或将链接存储为按钮的data属性。

例如，如果在您的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种方法访问URL：

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

在这种情况下，我建议您使用data-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');
});

Answer 4

您可以尝试以下一种方法：

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

Answer 5

如果仅需要获取当前.box.panel中单个.event_links对象的href，请执行以下操作：

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

最接近将为您提供与选择器匹配的第一个父元素。 这样，如果您还有其他不在该面板中的.event_links，它们将被跳过。 如果您使用parent（），您将被迫在.small和它的父母之间保持相同的HTML结构。

Answer 6

首先，尝试基于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");
});