我正在尝试使用 jquery/javascript 选择单击的项目的标题文本。鉴于单击的项目不是标题部分的后代,我在编写正确的选择器时遇到问题。例如,如果我单击 item3.1,我希望它返回文本“标题 3”。
<section class="mainclass">
<section class="header">Header 1</section>
<ul>
<li>item1.1</li>
<li>item1.2</li>
<li>item1.3</li>
</ul>
<section class="header">Header 2</section>
<ul>
<li>item2.1</li>
<li>item2.2</li>
<li>item2.3</li>
</ul>
<section class="header">Header 3</section>
<ul>
<li>item3.1</li>
<li>item3.2</li>
<li>item3.3</li>
</ul>
<section class="header">Header 4</section>
</section>
当前代码示例:
jQuery('body').on('click','li',function(e) {
if (jQuery(this).parent('header').length <= 0){
alert(jQuery(this).closest('mainclass').find('header').text());
}
});
此代码示例返回所有 header 。我无法让它与最接近的、 parent 的、查找等的变体一起工作。
最佳答案
使用.prev()
获取选择之前的元素。所以转到<ul>
,然后返回一个元素以获取 header 。另外,您需要一个 .
匹配一个类。
jQuery('body').on('click', 'li', function(e) {
console.log(jQuery(this).closest('ul').prev('.header').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="mainclass">
<section class="header">Header 1</section>
<ul>
<li>item1.1</li>
<li>item1.2</li>
<li>item1.3</li>
</ul>
<section class="header">Header 2</section>
<ul>
<li>item2.1</li>
<li>item2.2</li>
<li>item2.3</li>
</ul>
<section class="header">Header 3</section>
<ul>
<li>item3.1</li>
<li>item3.2</li>
<li>item3.3</li>
</ul>
<section class="header">Header 4</section>
</section>
关于javascript - 选择最近的非父类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48675803/