jquery点击后选择之前的元素

Question

<div class="container"> 
<div class="well"> 
    <h2>Hurry Up!</h2> 
    <ul> 
    <li> 
    <a onclick="clicked()"></a> 
    </li> 
    <li> 
    <a onclick="clicked()"></a> 
    </li> 
    </ul> 
    </div> 
</div> 

上面是我的html语法的一个示例。我想实现的是当单击“a”标签时，我想查找“h2”元素的文本。

例如，当点击“a”标签时，文本“快点！”的h2应显示在控制台中。

我试过，但它不工作：

function clicked(){ 
     var title = $(this).find('h2').text(); 
     console.log(title); 
} 

而且也是这样：

function clicked(){ 
     var title = $(this).parentsUntil('.container').find('h2').text(); 
     console.log(title); 
} 

在控制台，出现什么都没有，只有一个空行。

我想补充说的是我有很多次这个相同的语法。所以h2文本应该是它被点击的容器，因此我通过'this'来尝试它。

Answer 1

试试这个

function clicked(element){ 
 
     var title = $(element).closest('div').find('h2').html(); 
 
     console.log(title); 
 
     alert(title); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="well"> 
 
    <h2>Hurry Up!</h2> 
 
    <ul> 
 
    <li> 
 
    <a onclick="clicked(this)" href="#">Click 1</a> 
 
    </li> 
 
    <li> 
 
    <a onclick="clicked(this)" href="#"> Click 2</a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

试试这个：

<div class="container"> 
<div class="well"> 
    <h2>Hurry Up!</h2> 
    <ul> 
    <li> 
    <a onclick="clicked(this)"></a> 
    </li> 
    <li> 
    <a onclick="clicked(this)"></a> 
    </li> 
    </ul> 
    </div> 
</div> 

function clicked(elem){ 
    var text = $(elem).closest('h2').text(); 
    // text contains Hurry Up! in it 
} 

Answer 3

function clicked(element) { 
 
    var title = $(element).closest('ul').prev('h2').text(); 
 
    console.log(title); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="well"> 
 
    <h2>Hurry Up!</h2> 
 
    <ul> 
 
     <li> 
 
     <a onclick="clicked(this)">clicked</a> 
 
     </li> 
 
     <li> 
 
     <a onclick="clicked(this)">clicked</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

使用.closest()获得UL然后使用.prev()拿到H2

Answer 4

，如果你是不是在找一个模块化的答案你可以试试这个：类似这样的``

function clicked(){ 
    var title = $(".well h2").text(); 
    console.log(title); 
    }