如何在JavaScript中訪問定位標記？

Question

我想在JavaScript中訪問此定位標記：

<a href="#" class="pull-right"> Edit </a>

現在，它所在的HTML看起來像這樣：

<div class="about_section">
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a href="#" class="pull-right"> Edit </a>
                <h3 class="panel-title"> About You </h3>
             </div>
            <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea>
        </div>
    </div>
</div>

現在，我嘗試通過JavaScript中的以下路徑訪問此定位標記：

$('.about_section').find('a.pull-right').eq(0).on('click', function() {
    console.log('Works');   
})

這不起作用，也通過以下途徑進行：

$('.about_section').find('col-md-5').find('panel panel-default').find('panel-heading').find('a').eq(0).on('click', function() {
    //$('#edit-modal').modal()
    console.log('Works');
})

這也沒有用，有人有什么建議嗎？

Answer 1

您可以簡單地通過使用

document.querySelectorAll("a.pull-right");

你也可以這樣

$(".about_section a.pull-right").on('click',function(){
//rest of code
})

Answer 2

嘗試這個

<div class="about_section">

<div class="col-md-5">

<div class="panel panel-default">

    <div class="panel-heading">

        <a href="#" class="pull-right" onclick="fun();"> Edit </a>

        <h3 class="panel-title"> About You </h3>

     </div>

        <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea>

</div>

</div>


<script>
     function fun () {
         console.log("works");
     }
</script>

Answer 3

您可以使用HTML onclick事件屬性來觸發JS函數。 例如在這種情況下。 onclick='test();' 在定位標記上觸發頁面上定義的JS方法test()方法。

 <script> function test() { console.log('works'); } </script> <div class="about_section"> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> <a href="#" class="pull-right" onclick='test();'> Edit </a> <h3 class="panel-title"> About You </h3> </div> <textarea id="about_me" class="form-control inputstl" rows="5"></textarea> </div> </div> </div> 

Answer 4

這里有很多人失蹤了。 您遇到的第一個問題不是錨標記，而是選擇器。 .find('col-md-5')找不到任何東西，因為您只是告訴它找到了名為col-md-5的錨標記。 您忘記了句點（ . ）。 您可以像在CSS中使用選擇器一樣使用jQuery中的選擇器。

另外，您必須注意間距。 即使包含句點， .find('.panel .panel-default')仍將找不到任何內容，因為具有類panel的元素與具有類panel-default的元素相同。 該space告訴jQuery“查找具有類panel的元素，其子元素具有類panel-default ”

您的線路應該是什么樣的：

$('.about_section').find('.col-md-5').find('.panel.panel-default').find('.panel-heading')

以下應該可以正常工作：

 $('.about_section a.pull-right').on('click', function() { console.log('Works'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="about_section"> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> <a href="#" class="pull-right"> Edit </a> <h3 class="panel-title"> About You </h3> </div> <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea> </div> </div> </div> 

但是，有幾種方法可以完全回答您的問題，以及可以更好地實現這一目標的幾種方法。

您最初的問題標題有很多尋找答案的途徑。

1. 要獲取純JavaScript中的所有錨標簽： var a = document.getElementsByTagName('a')
2. 要在jQuery中獲取所有錨標簽： var a = jQuery('a')
3. 要通過香草JS中的ID，類或名稱獲取特定錨點：
   • 。 document.getElementById('ele_id_atr_val')
   • 。 document.getElementsByClassName('class-name')
   • 。 document.getElementsByName('ele_name_atr_val')
   • 請記住，使用Class和Name，它將獲得具有這些屬性值的所有元素。
4. 要通過香草jQuery中的ID，類或名稱獲取特定錨點：
   • 。 jQuery('#ele_id_atr_val')
   • 。 jQuery('.class-name')
   • 。 jQuery('[name=ele_name_atr_val]')
   • 請記住，使用Class和Name，它將獲得具有這些屬性值的所有元素。

在不考慮所有基礎知識的情況下，讓我們看一下如何改進您的工作。 您要向錨元素添加on_click事件。 首先，讓我們從“ action”或href屬性開始。 您使用的是典型且通常建議使用的# ，但是，我斷言這是一種不好的做法。 有多種原因，但是這里的答案很好地概括了它。 我建議將您的href屬性設置為href="javascript:void(0)" 。 這樣可以確保在單擊錨點時不會出現虛假調用或意外行為。

接下來，讓我們討論“事件處理程序”及其更好的建立。 您正在使用.eq() ，這將確保事件僅分配給一項，但這真的是您的意圖嗎？ 如果是這樣，那為什么要全部建立呢？ 為什么不給該項目一個唯一的id並根據該選擇器分配事件？ 另外，您要駕車穿越50英里的干草，才能到達拐角處的商店。 我使用的一條個人規則是，如果事件處理程序的選擇器看起來像論文上的完整句子，那太長了。 jQuery甚至香草JS的querySelector的要點是使事情變得更容易。 簡化事情。

因此，事件的選擇器應該很簡單：

$('.about_section .pull-right').on('click', function(e) {

總結起來很好。 它提供了一個父元素about_section塊，並且它是我們要應用該事件的子元素。 現在我們已經擁有了足夠的資源，讓我們做得更好，並討論“ 動態事件處理 ”。 在jQuery中稱為.on | .off方法。

通過結合使用jQuery的.on方法和“動態處理”（處理在document.readyState="complete"之后添加的元素）的思考，我們可以編寫更強大的事件委托語句，以更好地滿足我們的目的，並提供更易於閱讀的將來可能會審查和/或編輯我們代碼的人。

建立這種動態的主要方法有兩種。 第一個也是最推薦的方法是使用static元素（在頁面加載時始終存在）並將其分配給具有事件的子元素。 如：

$('.about_section').on('click', '.pull-right', function() {
    console.log('Works');   
});

在這里，我們依靠具有about_section類的元素作為加載頁面時始終可用的parent元素。 基本上，這個父母然后被告知：“嘿！嘿！你是的！每次當你有一個pull-right上課的孩子時，告訴那個孩子去做這個事情！” 確實如此。 無論是在頁面加載時添加，還是在頁面加載后五分鍾，具有pull-right類的孩子將始終按照其父母的意願進行操作。 這與我之前對$('.about_section .pull-right')建議不同，因為它將應用於此類動態元素（在加載后添加），而先前的建議僅適用於頁面存在時存在的所有那些元素。負載。

第二種主要的方法是使用$(document).on ，這是我首選的方法，但我認為它是其他人的“危險記憶”問題。 首先，請理解它不會傷害您的應用程序或其他計算機，這不是danger 。 它根本不受歡迎，因為這對運行時內存有危險。 用最簡單的術語來說，大多數情況下都是用舊的（和古老的設備）將所有內容分配給document變量可能會使頁面變慢。 通常，這不再是一個問題，並且五年多來，我一直在使用這種方法，從基本的商業網站到高端產品，我為軍隊制作的機密軍事應用程序，一應俱全。 不要問，我不會告訴。

無論如何，我更喜歡這種方法，因為它還提供了一種簡單的方法來組織整個事件列表，以及保持動態處理的功能，而這在當今的“實時頁面”世界中經常是必需的。

$(document)
    .on('click', '.about_section .pull-right', function() {
        console.log('Works');   
    })
    .on('event', 'selector', function(e) { /*   Easily      */ })
    .on('event', 'selector', function(e) { /*   Organized   */ })
    .on('event', 'selector', function(e) { /*   And     */ })
    .on('event', 'selector', function(e) { /*   Easy    */ })
    .on('event', 'selector', function(e) { /*   To      */ })
    .on('event', 'selector', function(e) { /*   Read    */ })
    .on('event', 'selector', function(e) { /*   For     */ })
    .on('event', 'selector', function(e) { /*   Future  */ })
    .on('event', 'selector', function(e) { /*   Devs    */ })

任何問題？