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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

This should do what you want:

// ==UserScript==
// @name        Test
// @namespace   so.youtube.test
// @version     1
// @grant       none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
setInterval(function() {

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

  $(".video-list-item:visible .powerBar").each(function(index, powerbar) {
    if (getWidthPercent(powerbar) < 75) $(powerbar).closest(".video-list-item").hide();
  });

}, 1000);
// ==/UserScript==

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

Sign up