Iterate over and traverse DOM tree

Aaron Matthews

Problem

I have a monthly subscription based WordPress website, which gives users monthly content and automatically moves them to the next subscription at the end of each month (but requires payment to proceed). Users have a page which lists all the subscription levels (and which ones they've purchased) on the website. I am using a plugin called Ultimate Membership Pro to accomplish this.

The problem comes in when we have had to integrate it with WooCommerce (for good reason). Because of this, when a user has purchased a subscription level it still gives the option to purchase it again on the subscription levels page.

I disabled the repeat purchase functionality with php, but I need to the purchase button to be disabled dynamically on the subscription list page (an example of which is listed in the fiddles below).

Attempted Solution

Using a foreach loop and some DOM tree traversing, jQuery finds the name of the level where it is listed at the top and disables its button on the page. This works just fine.

The problem is that it doesn't work when there is more than one level listed.

I have two fiddles which demonstrate the issue.

PS because I am working in Wordpress my jQuery is written in no-conflict mode.

Examples & Code

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
Only one level listed

Non working example
Two levels listed

Aaron Matthews

I solved it using meagar♦'s answer here

I just needed to store the level names in an array and access it and such then presto!

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to iterate over a Tree in Scalaz

From Dev

Iterate over Binary Search Tree

From Dev

How to traverse dom tree from a list of elements

From Dev

Traverse the DOM with this Tree Traversal? help JQuery

From Dev

How to traverse dom tree from a list of elements

From Dev

How to iterate over a boost R-tree?

From Dev

Iterate over all nodes in a recursively defined tree

From Dev

Traverse the tree with Capybara

From Dev

how to traverse this tree?

From Dev

Traverse tree in a functional way

From Dev

Haskell Tree Traverse Confused

From Dev

How to traverse a Huffman tree?

From Dev

Haskell Tree Traverse Confused

From Dev

Traverse the dom with CsQuery

From Dev

Traverse the DOM to passback an image

From Dev

For loop to iterate over directory tree extracting results from files of the same name

From Dev

Newly added element can't traverse up through its ancestors in the DOM tree using jQuery API closest(), returning "undefined"

From Dev

How to Traverse an NLTK Tree object?

From Dev

Traverse a tree represented by its edges

From Dev

Use foldl to traverse a Tree in Haskell

From Dev

Traverse an expression tree and extract parameters

From Dev

Number Of Ways To Traverse a Binary Tree

From Dev

arangodb traverse tree including edges

From Dev

Traverse recursive json tree and merge

From Dev

Use foldl to traverse a Tree in Haskell

From Dev

arangodb traverse tree including edges

From Dev

Traverse recursive json tree and merge

From Dev

Traverse a Spaghetti Stack and reverse to a tree

From Dev

Traverse DOM find id backwards