如何在Javascript中选择前n个兄弟？

在Google标记管理器中，使用元素、元素类、元素父类来触发标记非常容易。不幸的是，在这种情况下，我想刮取一个元素，它只在同一个版本中可用

因此，当人们点击链接“delete”（class=deleteItem）时，我想删除url\u product\u 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>

删除

假设您希望在事件处理程序中实现这一点，您可以使用

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();
});

---

假设您希望在事件处理程序中实现这一点，您可以使用

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();
});

下面是一个jQuery方法（自行修改和测试），您可以在GTM自定义Javascript变量中执行此操作：

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

这里的前提是您的元素都嵌套在

元素下，您所做的一切就是获取单击的元素并对您感兴趣的元素进行刮取。

这里有一个jQuery方法（自行修改和测试），您可以在GTM自定义Javascript变量中执行此操作：

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

---

这里的前提是，您的元素都嵌套在

元素下，您所做的一切都是获取单击的元素并抓取您感兴趣的元素。

这与Rob的答案类似，但也考虑了代码是否移动到其他div中，等等。。因为人们一直在更新他们的用户界面。随着产品的成熟，这应该更加可持续。当然，如果您更改为类似于引导数据表的内容，您会希望查看.nestest（）调用

$(".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());
});

---

这与Rob的答案类似，但也考虑了代码是否移动到其他div中，等等。。因为人们一直在更新他们的用户界面。随着产品的成熟，这应该更加可持续。当然，如果您更改为类似于引导数据表的内容，您会希望查看.nestest（）调用

$(".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());
});

---

这都是一棵树。转到父级（td），然后在该父级中查找类为

urlProductId

的元素。这都是一个树。转到父级（td），然后在该父级中查找类为

urlProductId

的元素。