Установлен флажок, связанный с ключевым словом или классом?

Question

У меня есть много неупорядоченных элементов для размещения в других папках (управление файлами через Интернет). У каждого элемента есть имя и формат, также у каждого формата есть класс.
Снимок экрана:

Здесь мы видим, как представлены файлы, как я уже упоминал ранее, они имеют имя и формат.Также видно, что каждый формат отображается с различным классом: аудио тип, тип текста, планшеты и т. Д.

HTML:

<div id="FilesListContainer">
  ...
  <div id="listView">
    <div class="filerow alt fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>56,5 MB</span></li>
          <li><span class="date">6 mar 19 20:04</span></li>
          <li><span><input type="checkbox" value="6729995901" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename txt">
        <h3>
          <a class="expanderHeader downloadAction downloadContext" href="/Barbarella-Dejah.Thoris.002.2019.5.covers.Digital.DR.and.Quinch-Empire,6729995901.cbr" title="Barbarella-Dejah.Thoris.002.2019.5.covers.Digital.DR.and.Quinch-Empire">
            <span class="bold">Barbarella-Dejah.Thoris.002.2019.5.covers.Digital.<span class="e"> </span>DR.and.Quinch-Empire</span>.cbr
          </a>
        </h3>
      </div>
      <div style="clear:left;">
        <span class="filedescription" style="display: none"></span>
      </div>
    </div>
    <div class="filerow fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>3,90 GB</span></li>
          <li><span class="date">6 mar 19 18:44</span></li>
          <li><span><input type="checkbox" value="6729949482" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename zip">
        <h3>
          <a class="expanderHeader downloadAction downloadContext" href="/Syrnont.2016.F01.1080c.OyhEnl.k265.10o.NNP.2.0.EMrebK,6729949482.rar(archive)" title="Syrnont.2016.F01.1080c.OyhEnl.k265.10o.NNP.2.0.EMrebK">
            <span class="bold">Syrnont.2016.F01.1080c.OyhEnl.k265.10o.NNP.2.0.EMr<span class="e"> </span>ebK</span>.rar
          </a>
        </h3>
      </div>
      <div style="clear:left;">
        <span class="filedescription" style="display: none"></span>
      </div>
    </div>
    <div class="filerow alt fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>139 KB</span></li>
          <li><span class="date">6 mar 19 17:15</span></li>
          <li><span><input type="checkbox" value="6729877801" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename pdf">
        <h3>
          <a class="expanderHeader downloadAction downloadContext" href="/December-2009-FA4A,6729877801.pdf" title="December-2009-FA4A">
            <span class="bold">December-2009-FA4A</span>.pdf
          </a>
        </h3>
      </div>
      <div style="clear:left;">
        <span class="filedescription" style="display: none"></span>
      </div>
    </div>
  </div>
</div>

Как скрипт будет проходить по всем файлам, брать часть текста и проверять его?

Например, если я хочу выбрать все элементы, содержащие ключевое слово «MacOS», то выберите все те, которые содержатслово «MacOS» или, возможно, его формат.Я не видел ничего подобного ни в расширениях, ни в пользовательских сценариях.

Можете ли вы создать что-то подобное?

Если вы не можете создать что-то подобное, тогда, я думаю, вы могли бы взять свой класс'и автоматически выбрать все подходящие?

В итоге : Как скрипт может помечать только файлы .rar, например, среди всех остальных?

ДЕМО на JSFiddle

Answer 1

Сначала идентифицируйте узлы , которые указывают файлы, которые вы хотите.Для .rar файлов это будет выглядеть следующим образом:

var zipFiles = document.querySelectorAll (".fileItemContainer > .filename.zip");

Если вы действительно хотите только .rar, а не другие виды сжатых файлов, то:

zipFiles = Array.from (zipFiles).filter (node => /\.rar\b/i.test (node.querySelector (".downloadContext").textContent) );

Затем перейдите DOM к соответствующим флажкам :

zipFiles.forEach (node => {
    var theChckBox = node.previousElementSibling.querySelector ("input[type='checkbox']");
} );

и отметьте их:

zipFiles.forEach (node => {
    var theChckBox = node.previousElementSibling.querySelector ("input[type='checkbox']");
    theChckBox.checked = true;
} );

---

Все это в jQuery:

$(".fileItemContainer > .filename.zip").has (".downloadContext:contains(.rar)").prev ().find ("input[type='checkbox']").prop ("checked", true);

- где бит .has(...) является необязательным.

---

---

Еслистраница управляется AJAX (javascript) , используйте waitForKeyElements или MutationObserver.

Демо:

// ==UserScript==
// @name     _Check select text boxes
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
// @grant    none
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */
/* eslint-disable no-multi-spaces, */

waitForKeyElements (".fileItemContainer > .filename.zip", clickRelatedCheckbox);

function clickRelatedCheckbox (jNode) {
    var theChckBox = jNode.prev ().find ("input[type='checkbox']");
    theChckBox.prop ("checked", true);
}

/********************************************************************
******* Everything below this block, including the other      *******
******* blocks is simulated target page.                      *******
******* It's NOT part of the userscript.                      *******
********************************************************************/

ul, li, div {margin: 0; padding: 0;}
li {display: inline-block; margin-right: 1em;}
h3 {
    margin: 0 0 2ex 0;
    max-width: 95%;
    overflow: auto;
    white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<div id="FilesListContainer">
  ...
  <div id="listView">
    <div class="filerow alt fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>56,5 MB</span></li>
          <li><span class="date">6 mar 19 20:04</span></li>
          <li><span><input type="checkbox" value="6729995901" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div class="filename txt">
        <h3>
          <a class="expanderHeader downloadAction downloadContext"
            href="/Barbarella-Dejah.Thoris.002.2019.5.covers.Digital.DR.and.Quinch-Empire,6729995901.cbr">
            <span class="bold">Barbarella-Dejah.Thoris.002.2019.5.covers.Digital.<span class="e">
              </span>DR.and.Quinch-Empire</span>.cbr
          </a>
        </h3>
      </div>
    </div>
    <div class="filerow fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>3,90 GB</span></li>
          <li><span class="date">6 mar 19 18:44</span></li>
          <li><span><input type="checkbox" value="6729949482" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div class="filename zip">
        <h3>
          <a class="expanderHeader downloadAction downloadContext"
            href="/Syrnont.2016.F01.1080c.OyhEnl.k265.10o.NNP.2.0.EMrebK,6729949482.rar(archive)">
            <span class="bold">Syrnont.2016.F01.1080c.OyhEnl.k265.10o.NNP.2.0.EMr<span class="e"> </span>ebK</span>.rar
          </a>
        </h3>
      </div>
    </div>
    <div class="filerow alt fileItemContainer">
      <div class="fileinfo tab">
        <ul class="borderRadius tabGradientBg">
          <li><span>139 KB</span></li>
          <li><span class="date">6 mar 19 17:15</span></li>
          <li><span><input type="checkbox" value="6729877801" name="selectFileItem"></span></li>
        </ul>
      </div>
      <div class="filename pdf">
        <h3>
          <a class="expanderHeader downloadAction downloadContext" href="/December-2009-FA4A,6729877801.pdf"
            title="December-2009-FA4A">
            <span class="bold">December-2009-FA4A</span>.pdf
          </a>
        </h3>
      </div>
    </div>
  </div>
</div>