遍历DOM树

Question

问题

我有一个每月订阅的基础上的WordPress网站，它给用户每月的内容，并自动移动到下一个订阅在每个月底(但需要付款进行)。用户有一个页面，其中列出了网站上的所有订阅级别(以及他们购买的订阅级别)。我正在使用一个名为“终极会员专业”的插件来完成这个任务。

当我们不得不将它与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.');
    }
  }
});