迭代遍历 DOM 树答案

【问题标题】：Iterate over and traverse DOM tree迭代遍历 DOM 树
【发布时间】：2017-06-27 09:04:54
【问题描述】：

问题

我有一个基于每月订阅的 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
列出了两个级别

【问题讨论】：

$('.ihc-account-subscr-list .ihc-level-name') 返回多个元素，因此.text() 将包含所有元素的文本内容
也许你的意思是var lvlName = $(this).parent('.ihc-level-item').find('.ihc-account-subscr-list .ihc-level-name').text();
@haim770 哇，这很有趣，谢谢 ^^ 你是对的。我检查并将 .ihc-level-name 内页面上的所有级别名称存储到一个字符串中。如果它可以将它存储在一个数组中会很好，但也许我可以以某种方式提取名称。第二个建议返回一个空字符串，所以我不确定它是否有效：/
@haim770 var lvlName = $('.ihc-account-subscr-list').find('.ihc-level-name').text(); 这也可以，但它也会返回一个连接字符串

标签： jquery wordpress iteration tree-traversal

【解决方案1】：

我使用 meagar♦'s 回答 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.');
    }
  }
});

【讨论】：