迭代并遍历 DOM 树

亚伦马修斯

问题

我有一个基于月度订阅的WordPress网站，它为用户提供月度内容，并在每个月末自动将他们转移到下一个订阅（但需要付费才能继续）。用户有一个页面，其中列出了网站上的所有订阅级别（以及他们购买了哪些级别）。我正在使用一个名为Ultimate Membership Pro的插件来实现这一点。

当我们不得不将它与WooCommerce集成时，问题就出现了（有充分的理由）。因此，当用户购买了订阅级别时，它仍会在订阅级别页面上提供再次购买的选项。

我用 php 禁用了重复购买功能，但我需要在订阅列表页面上动态禁用购买按钮（下面的小提琴中列出了一个例子）。

尝试的解决方案

使用foreach循环和一些DOM 树遍历，jQuery 找到它列在顶部的级别的名称，并在页面上禁用它的按钮。这工作得很好。

问题是当列出多个级别时它不起作用。

我有两个小提琴来证明这个问题。

PS 因为我在 Wordpress 中工作，所以我的 jQuery 是在无冲突模式下编写的。

示例和代码

jQuery(function($) {
  $('.ihc-level-item .ihc-level-item-title').each(function() {
    // Get the level name
    var lvlName = $('.ihc-account-subscr-list .ihc-level-name').text();
    // Find that level on page
    if ($(this).html() == lvlName) {
      // Console log confirms its working
      console.log('Found level: ' + lvlName + ' on page.');
      $(this).closest('.ihc-level-item').children('.ihc-level-item-content').addClass('lvl-purchased');
    }
  });
});

工作示例
仅列出一级

非工作示例
列出了两个级别

亚伦马修斯

我在这里使用meagar♦ 的答案解决了它

我只需要将级别名称存储在一个数组中并访问它，然后就可以了！

$('.ihc-level-item .ihc-level-item-title').each(function() {
  // Get the level names and store inside array
  var array = [];
  var lvlName = $('.ihc-account-subscr-list .ihc-level-name').map(function () { return $(this).text(); }).get();
  console.log(lvlName);
  for (var i=0; i<lvlName.length; i++) {
    // Find that level on page
    if ($(this).html() == lvlName[i]) {
      $(this).closest('.ihc-level-item').children('.ihc-level-item-content').addClass('lvl-purchased');
    } else {
      console.log('Couldn\'t find level on page.');
    }
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。