迭代并遍历 DOM 树

Question

问题

我有一个基于 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');
    }
  });
});

Working example
只列出了一级

Non working example
列出了两个级别

Answer 1

我用 meagar♦ 的 答案解决了 here

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

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

迭代并遍历 DOM 树

Iterate over and traverse DOM tree

iteration

wordpress

jquery

tree-traversal

问题

尝试的解决方案

示例和代码