jquery點擊後選擇之前的元素

-1

<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」元素的文本。jquery點擊後選擇之前的元素

例如，當點擊「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'來嘗試它。

來源

2016-08-05 crazyboy24

通元素，把它作爲函數中的參數以及該變量而不是「this」。 – RRK

試試這個

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>

來源

2016-08-05 05:54:55

我試過了你的代碼，但是隨着'快點'它也顯示'a'元素文本。它應該只顯示h2文本，即'快點' – crazyboy24

@ user1645734 - 你必須做出與我提供的不同的東西，就像我上面提供的它顯示快點的代碼片段一樣！在'console.log'和'alert'中。你運行了上面的代碼片段並檢查了嗎？ –

是的，我直接在stackoverflow上運行它，也試過它在jsfiddle。你可以在這裏看到https://jsfiddle.net/L4nkqe14/ – crazyboy24

試試這個：

<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 
}

來源

2016-08-05 05:51:30

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

來源

2016-08-05 05:55:28 guradio

我試過了你的代碼，但是隨着'快點'它也顯示'li'文本。它應該只顯示h2文本，即'快點' – crazyboy24

檢查您的html標記是否已關閉標記 – guradio

我已檢查過它，並且每個標記都已正確關閉。我複製了你提供的代碼，並且直接從stackoverflow運行它，它顯示了li文本。 – crazyboy24

，如果你是不是在找一個模塊化的答案你可以試試這個：類似這樣的``

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

來源

2016-08-05 06:06:44 orangespark

jquery點擊後選擇之前的元素

回答

相關問題