如何在Javascript中选择第N个PreviousSibling？

Question

在Google跟踪代码管理器中，使用元素，元素类，元素父类来触发标记非常容易。 不幸的是，在这种情况下，我想刮掉一个只有相同的元素。

所以，当人们点击链接“删除”（class = deleteItem）时，我想要抓取url_product_id（以粗体显示）。

我已经尝试了很多，但无法弄清楚如何实现这一目标。 我希望有人可以帮助我。

<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

假设您想要在事件处理程序中完成此任务，您可以使用parentNode和querySelector来实现您的目标：

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

或者使用jQuery：

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

Answer 2

这是一个jQuery方法（自己修改和测试），你可以在GTM Custom Javascript变量中执行此操作：

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

这里的前提是你的元素都嵌套在<td>元素下，你所做的就是获取被点击的元素并抓取你感兴趣的元素。

Answer 3

这类似于Rob的答案，但也考虑了代码是否被移动到其他div等等。因为人们一直在更新他们的UI。 随着产品的成熟，这应该更具可持续性。 当然，如果您更改为类似BootStrap数据表的内容，您将需要观看.closest（）调用。

$(".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小提琴