Javascript 是否按关键字或类选中相关复选框?

Javascript 是否按关键字或类选中相关复选框?,javascript,checkbox,userscripts,tampermonkey,Javascript,Checkbox,Userscripts,Tampermonkey,我有许多无序的项目要放在其他文件夹中(通过web进行文件管理)。每个元素都有一个名称和格式,而且每个格式都有一个类。 屏幕截图: 这里我们看到文件是如何显示的,正如我前面提到的,它们有一个名称和格式。 还可以看到,每种格式都显示了不同的类,即音频类型、文本类型、平板电脑等 HTML: <div id="FilesListContainer"> ... <div id="listView"> <div class="filerow alt fileI

我有许多无序的项目要放在其他文件夹中(通过web进行文件管理)。每个元素都有一个名称和格式,而且每个格式都有一个类。
屏幕截图:

这里我们看到文件是如何显示的,正如我前面提到的,它们有一个名称和格式。 还可以看到,每种格式都显示了不同的类,即音频类型、文本类型、平板电脑等

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>
zipFiles.forEach (node => {
    var theChckBox = node.previousElementSibling.querySelector ("input[type='checkbox']");
    theChckBox.checked = true;
} );
$(".fileItemContainer > .filename.zip").has (".downloadContext:contains(.rar)").prev ().find ("input[type='checkbox']").prop ("checked", true);

...
  • 56,5 MB
  • 3月6日19:04
  • 3,90 GB
  • 3月6日19:44
  • 139 KB
  • 3月6日19:15
脚本如何在所有文件中运行,获取部分文本并进行检查

例如,如果要选择包含关键字的所有元素 “MacOS”,然后选择所有包含单词“MacOS”或其 格式。 我在扩展或用户脚本中都没有看到类似的情况

你能创造出这样的东西吗

如果你不能创建这样的东西,那么我想你可以选择你的“类”,并自动选择所有匹配的

总而言之:脚本如何仅标记“.rar”文件等


首先确定指示所需文件的节点。对于
.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']");
} );

并检查它们:

<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>
zipFiles.forEach (node => {
    var theChckBox = node.previousElementSibling.querySelector ("input[type='checkbox']");
    theChckBox.checked = true;
} );
$(".fileItemContainer > .filename.zip").has (".downloadContext:contains(.rar)").prev ().find ("input[type='checkbox']").prop ("checked", true);

jQuery中的所有内容:

<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>
zipFiles.forEach (node => {
    var theChckBox = node.previousElementSibling.querySelector ("input[type='checkbox']");
    theChckBox.checked = true;
} );
$(".fileItemContainer > .filename.zip").has (".downloadContext:contains(.rar)").prev ().find ("input[type='checkbox']").prop ("checked", true);
--其中,
.has(…)
位是可选的



如果页面是AJAX(javascript)驱动的,请使用
waitforkyelments
MutationObserver

演示:

/==UserScript==
//@name\u选中选择文本框
//@match*://YOUR_SERVER.COM/YOUR_PATH/*
//@需要https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
//@需要https://gist.github.com/raw/2625891/waitForKeyElements.js
//@grant GM_addStyle
//@grant GM.getValue
//==/UserScript==
//@grant none
//-需要@grant指令来恢复适当的沙箱。
/*全球美元,WaitFork美元*/
/*eslint禁用无多个空格*/
WaitForkYelloments(“.fileItemContainer>.filename.zip”,单击相关复选框);
函数clickRelatedCheckbox(jNode){
var theChckBox=jNode.prev().find(“输入[type='checkbox']”);
chckbox.prop(“选中”,为真);
}
/********************************************************************
*******这个街区下面的所有东西,包括另一个*******
*******块是模拟的目标页面*******
*******它不是用户脚本的一部分*******
********************************************************************/
ul,li,div{margin:0;padding:0;}
li{显示:内联块;右边距:1em;}
h3{
边际:0.02×0;
最大宽度:95%;
溢出:自动;
空白:nowrap;
}

...
  • 56,5 MB
  • 3月6日19:04
  • 3,90 GB
  • 3月6日19:44
  • 139 KB
  • 3月6日19:15

非常感谢您的帮助,我对这一点很陌生,但您解释得很好。我必须为我犯的错误道歉。。。我把HTML放错了,它的代码在put HTML中工作,但在真实的HTML中不工作(再次抱歉),如果它是如此友好,使它适应这个HTML将非常有帮助(新的HTML如我希望脚本运行的真实站点所示)假设在所有这些中,我只想标记那些包含“Mac.OS.X”的,非常感谢您的时间和我的错误mistake@Stack_qwerty,这是一个新的问题(但原则是一样的)。标记此答案已被接受,并在必要时提出新问题。但是请注意,唯一需要更改的是从
Mac.OS.X
节点到复选框节点的类型和方式。看看你是否能确定这些变化;这不太难。@Stack_qwerty,谢谢。很抱歉这么固执,但是更改太大了,无法在评论中处理,我们都被“不断发展”的问题所困扰。@Stack_qwerty,再看一眼,你似乎可以使用:
WaitForkEyelments(.filename:contains(Mac.OS.X)”,clickRelatedCheckbox)theChckBox=jNode.prev().prev().find(“输入[type='checkbox']”)。这是未经测试的,如果它不起作用(并且你无法理解),那么就打开一个新问题。它起作用了。它有效地标记了所有包含“MacOS”的元素。我看到我用另一种方式标记它们,也就是说,我手动标记每个元素,我可以选择编辑、移动、复制。。。当脚本选中它时,它不会启用选项。我会