Javascript 在jquery中，“查找”无法从dom中选择数据

我需要什么

• 我需要从类事件链接访问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>

html元素的快照

• 我已尝试使用.parent（）访问，但它不起作用

o/p

• 我需要通过点击class small访问事件链接类，以便 将从该html元素获取href

• 欢迎提出任何建议

试试这个

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

试试这个

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

你可以试试这个：

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

你可以试试这个：

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

---

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

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

---

“最近”将获得与选择器匹配的第一个父元素。这样，如果您有任何其他.event_链接未进入此面板，则将跳过这些链接。如果使用parent（），您将被迫在.small和它的父对象之间保持相同的HTML结构。

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

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

---

“最近”将获得与选择器匹配的第一个父元素。这样，如果您有任何其他.event_链接未进入此面板，则将跳过这些链接。如果您使用parent（），您将被迫在.small和它的父对象之间保持相同的HTML结构。

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

---

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

---

仅获取相关url的简单解决方案是使用

parent（）

函数：

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

因为你下面有三层

find（）

将从层次结构中的给定对象开始向下搜索

但是如前所述，只要您更改html布局并可能删除或添加div容器，此操作就会失败

更好的做法是为包含URL的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>

---

仅获取相关url的简单解决方案是使用

parent（）

函数：

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

因为你下面有三层

find（）

将从层次结构中的给定对象开始向下搜索

但是如前所述，只要您更改html布局并可能删除或添加div容器，此操作就会失败

更好的做法是为包含URL的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>

---

在这种情况下，我建议使用dataattr，因为您不希望依赖于代码结构和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>

---

在这种情况下，我建议使用dataattr，因为您不希望依赖于代码结构和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>

---

$（this）

引用锚元素，它没有类名为

events\u links

的子元素。因此，您的

.find（）

失败。

$（此）

引用锚元素，并且它没有具有类名

事件链接的子元素。因此，您的
.find（）
失败。如果页面中有多个此类，该怎么办？你没有得到具体的实例value@charlietfl然后，此代码将只拾取第一个匹配项。@您应该选中relative to button，以便在同一页面上有多个实例。这是一种错误的方法，正如您在代码中看到的，有多个元素具有类“events\u links”。您的代码会导致在DOM中始终获取第一个元素的href，该元素的类为“events\u links”。如果页面中有多个该类，该怎么办？你没有得到具体的实例value@charlietfl然后，此代码将只拾取第一个匹配项。@您应该选中relative to button，以便在同一页面上有多个实例。这是一种错误的方法，正如您在代码中看到的，有多个元素具有类“events\u links”。您的代码会导致在DOM中始终获得第一个元素的href，该元素的类为“events\u links”。刚才看到的这个注释，这里的data attr是一个很好的工具。刚才看到的这个注释，这里的data attr是一个很好的工具。