2023年6月1日 22:53:34go评论52阅读模式

英文:

Find element by class under the same parent

问题

关于为什么它不与具有该类的元素匹配，是否有特殊原因？
我已经检查了一百万次，看不出我做错了什么。

$('.lnk-folder').click(function(e) {
  e.preventDefault();
  var header = $(this).parent('thead').find('.folder-header');
  console.log($(header));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<thead>
  <tr>
    <th colspan="10" style="padding:0px; font-size:120%;background-color:#ff0000;">
      <div style="float:left;min-width:20%;">
        <a style="color: #000" class="lnk-folder folder-close" data-hash="" href="#">
          <i class='fa fa-folder-open'></i> Folder 1
        </a>
      </div>
      <div style="float:left;height:26px;padding-left:10px;">
        <a href="#"><i class='fas fa-file-upload tooltip' style="color:#fff;"><span class="tooltiptext_m">New</span></i></a>
      </div>
    </th>
  </tr>
  <tr class="folder-header">
    <th colspan="2" style="background-color:#0c343d;vertical-align:middle;"> Name </th>
    <th style="width:7%;background-color:#0c343d;vertical-align:middle;"> Code </th>
    <th style="width:30%;background-color:#0c343d;vertical-align:middle;"> Act</th>
    <th style="width:7%;background-color:#0c343d;vertical-align:middle;"> Version</th>
  </tr>
</thead>

不要翻译代码部分。

英文:

Any particular reason about this isn't matching the element with that class?
I have checked a million times and can't see what is that I'm doing wrong.

$(&#39;.lnk-folder&#39;).click(function(e) {
  e.preventDefault();
  var header = $(this).parent(&#39;thead&#39;).find(&#39;.folder-header&#39;);
  console.log($(header));
});

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th colspan=&quot;10&quot; style=&quot;padding:0px; font-size:120%;background-color:#ff0000;&quot;&gt;
      &lt;div style=&quot;float:left;min-width:20%;&quot;&gt;
        &lt;a style=&quot;color: #000&quot; class=&quot;lnk-folder folder-close&quot; data-hash=&quot;&quot; href=&quot;#&quot;&gt;
          &lt;i class=&#39;fa fa-folder-open&#39;&gt;&lt;/i&gt; Folder 1
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div style=&quot;float:left;height:26px;padding-left:10px;&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&#39;fas fa-file-upload tooltip&#39; style=&quot;color:#fff;&quot;&gt;&lt;span class=&quot;tooltiptext_m&quot;&gt;New&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;folder-header&quot;&gt;
    &lt;th colspan=&quot;2&quot; style=&#39;background-color:#0c343d;vertical-align:middle;&#39;&gt; Name &lt;/th&gt;
    &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Code &lt;/th&gt;
    &lt;th style=&#39;width:30%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Act&lt;/th&gt;
    &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Version&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;

答案1

得分: 3

parent() 是你的问题。它在 DOM 中准确查找父元素的一个级别，但你需要更高层级。为了做到这一点，使用 closest()

$(&#39;.lnk-folder&#39;).click(function(e) {
  e.preventDefault();
  var header = $(this).closest(&#39;thead&#39;).find(&#39;.folder-header&#39;);
  console.log($(header));
});

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th colspan=&quot;10&quot; style=&quot;padding:0px; font-size:120%;background-color:#ff0000;&quot;&gt;
        &lt;div style=&quot;float:left;min-width:20%;&quot;&gt;
          &lt;a style=&quot;color: #000&quot; class=&quot;lnk-folder folder-close&quot; data-hash=&quot;&quot; href=&quot;#&quot;&gt;
            &lt;i class=&#39;fa fa-folder-open&#39;&gt;&lt;/i&gt; Folder 1
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div style=&quot;float:left;height:26px;padding-left:10px;&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&#39;fas fa-file-upload tooltip&#39; style=&quot;color:#fff;&quot;&gt;&lt;span class=&quot;tooltiptext_m&quot;&gt;New&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;folder-header&quot;&gt;
      &lt;th colspan=&quot;2&quot; style=&#39;background-color:#0c343d;vertical-align:middle;&#39;&gt; Name &lt;/th&gt;
      &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Code &lt;/th&gt;
      &lt;th style=&#39;width:30%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Act&lt;/th&gt;
      &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Version&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;

英文:

parent() is your problem. It looks up the DOM exactly one level, to the parent element, but you need to go higher than that. To do so, use closest()

$(&#39;.lnk-folder&#39;).click(function(e) {
  e.preventDefault();
  var header = $(this).closest(&#39;thead&#39;).find(&#39;.folder-header&#39;);
  console.log($(header));
});

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th colspan=&quot;10&quot; style=&quot;padding:0px; font-size:120%;background-color:#ff0000;&quot;&gt;
        &lt;div style=&quot;float:left;min-width:20%;&quot;&gt;
          &lt;a style=&quot;color: #000&quot; class=&quot;lnk-folder folder-close&quot; data-hash=&quot;&quot; href=&quot;#&quot;&gt;
            &lt;i class=&#39;fa fa-folder-open&#39;&gt;&lt;/i&gt; Folder 1
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div style=&quot;float:left;height:26px;padding-left:10px;&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&#39;fas fa-file-upload tooltip&#39; style=&quot;color:#fff;&quot;&gt;&lt;span class=&quot;tooltiptext_m&quot;&gt;New&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class=&quot;folder-header&quot;&gt;
      &lt;th colspan=&quot;2&quot; style=&#39;background-color:#0c343d;vertical-align:middle;&#39;&gt; Name &lt;/th&gt;
      &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Code &lt;/th&gt;
      &lt;th style=&#39;width:30%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Act&lt;/th&gt;
      &lt;th style=&#39;width:7%;background-color:#0c343d;vertical-align:middle;&#39;&gt; Version&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在相同父元素下按类查找元素

问题

答案1

专业菜单使用JavaScript和jQuery（最后部分）

如何在Jquery和Golang中使用输入的JSON数据进行Ajax调用？

Datatable.net内置的单词换行样式

如何在Cypress中测试我获取的HTML元素，而不使用类选择器？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论