jQuery: hide .parent if child has HTML numerical range style value?

Question

I am using a Greasemonkey script called Youtube Video Ratings Bar with Power Meter, it places a bar under each video on YouTube, that displays it's ratings, likes, dislikes, etc. This is very useful, however I wanted to take it a step further. Child/inner element:

<div class="powerBar" style="width: 26.1181%;"></div>

As you can see, the child element class="powerBar", is a main determining feature of a videos popularity. It has a style="width: 26.1181%" attribute, a random numerical percentage value for each video the bar is on. I am curious how you can hide the parent element, if the inner class/child .powerBar, has less than 75% of its style width. Parent element:

<li class="yt-shelf-grid-item">

Now, I had previously asked a question pertaining somewhat similarity. If the code from the previous question I had asked can be used, that would be most awesome. Thank you for taking time out of your day.

---

working version: https://stackoverflow.com/revisions/40065508/3

Answer 1

This should do what you want:

// ==UserScript==
// @name        youtube hide powerbar
// @namespace   hides videos with low popularity
// @include     *www.youtube.com*
// @version     1
// @grant       none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

setInterval(function() {

  function getWidthPercent(element) {
    return parseFloat(element.style.width) || 0;
  }

  $(".likesBar").each(function() {
    if (getWidthPercent(this) < 88) $(this).closest(".video-list-item").css( "opacity", "0.1" );
  });

}, 2000);
// requires https://greasyfork.org/en/scripts/2302-youtube-video-ratings-bar-with-power-meter

The interval is there to regularly check for DOM updates, eg when using the progressive loading of videos feature or due to the other Greasemonkey script loading rating information asynchronously.