Wie kann ich das Nth PreviousSibling in Javascript auswählen?

Question

In Google Tag Manager ist es sehr einfach, das Element, die Elementklassen und die Element-Elternklassen zu verwenden, um Tags auszulösen. Leider möchte ich in diesem Fall ein Element kratzen, das nur in demselben vorhanden ist.

Also, wenn Leute auf den Link "löschen" klicken (class = deleteItem) Ich möchte die URL_product_id (in Fettdruck) schaben.

Ich habe so viel versucht, aber kann nicht herausfinden, wie dies zu erreichen ist. Ich hoffe, dass mir jemand helfen kann.

<td align="center"> 
    <span class="selquantity menosdis"></span> 
    <span class="selquantity plus"></span> 
    <input class="urlProductId" type="hidden" name="url_product_id" value="113293"> 
    <input class="urlQuantity" type="text" name="url_quantity" value="1" readonly="readonly"> 
    <br> 
    <a style="cursor: pointer" class="deleteItem">delete</a> 
</td> 

Answer 1

Angenommen, Sie wollen diese Prozedur in einem Fall zu erreichen, Sie parentNode und querySelector zu erreichen Ihr Ziel verwenden:

var myClickHandler = function(event) { 
    var productId = event.target.parentNode.querySelector('. urlProductId').value; 
    // do stuff with productId 
} 

Oder mit jQuery:

$('.deleteItem').on('click', function() { 
    var productId = $(this).prev('.urlProductId').val(); 
}); 

Answer 2

Hier eine jQuery-Methode (selbst modifizieren und testen), und Sie könnten dies in einer GTM-benutzerdefinierten JavaScript-Variable tun:

function(){ 
    var ce = {{Click Element}}; // get the clicked element 
    if ($(ce).length > 0){ 
     return $(ce).closest('td').find('.urlProductId').attr('name'); 
    } 
    return undefined; 
} 

Die Prämisse, hier zu sein, dass Ihr alle Elemente unter dem <td> Element verschachtelt sind, und alles tun wird Sie das klickten Element zu nehmen und für das Element Schaben Sie interessiert sind.

Answer 3

Dies ist ähnlich zu Robs Antwort, berücksichtigt aber auch, wenn Code in zusätzliche divs usw. verschoben wird. Da aktualisieren Leute ihre Benutzeroberfläche ständig. Dies sollte nachhaltiger sein, wenn das Produkt reift. Natürlich sollten Sie sich den Aufruf von .closes() ansehen, wenn Sie jemals zu einem BootStrap-Datentabellen wechseln.

$(".deleteItem").on("click", function() { 
    var getClosestProdID = $(event.target).closest('td').find('.urlProductId'); 

    // Just for display of the value 
    alert("Our closest selected value is: " + getClosestProdID.val()); 
}); 

JS Fiddle