英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.lnk-folder').click(function(e) {
e.preventDefault();
var header = $(this).parent('thead').find('.folder-header');
console.log($(header));
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 3
parent() 是你的问题。它在 DOM 中准确查找父元素的一个级别，但你需要更高层级。为了做到这一点，使用 closest()
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.lnk-folder').click(function(e) {
e.preventDefault();
var header = $(this).closest('thead').find('.folder-header');
console.log($(header));
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
</table>
<!-- end snippet -->
英文:
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()
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.lnk-folder').click(function(e) {
e.preventDefault();
var header = $(this).closest('thead').find('.folder-header');
console.log($(header));
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论