如何根据子标记的innerHTML选择父标记？

Question

我想选择"ytd-compact-link-renderer"标记，如果您注意到，内部深处，它的"yt-formatted-string"标记为id="label"，而innerHTML为"Creator studio".此子标记为嵌套在里面，所以它就像一个大孩子。

"ytd-compact-link-renderer"标记的类名与其他我不想选择的标记相同。选择它的唯一方法似乎是基于它的大孩子的innerHTML。最有可能的是，用CSS选择它是不可能的，所以如何用JavaScript或jQuery选择呢？

<ytd-compact-link-renderer class="style-scope yt-multi-page-menu-section-renderer" compact-link-style="">

    <a id="endpoint" class="yt-simple-endpoint style-scope ytd-compact-link-renderer" tabindex="-1" href="/dashboard">
      <paper-item class="style-scope ytd-compact-link-renderer" role="option" tabindex="0" aria-disabled="false">


        <div class="content-icon style-scope ytd-compact-link-renderer">
          <yt-img-shadow height="40" width="40" class="style-scope ytd-compact-link-renderer" disable-upgrade="" hidden="">
          </yt-img-shadow>
          <yt-icon class="style-scope ytd-compact-link-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon">
        <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM10 15V9l5 3-5 3z" class="style-scope yt-icon"></path>
      </g></svg>


  </yt-icon>
        </div>
        <yt-formatted-string id="label" class="style-scope ytd-compact-link-renderer">Creator Studio</yt-formatted-string>
        <yt-formatted-string id="subtitle" class="style-scope ytd-compact-link-renderer"></yt-formatted-string>
        <yt-icon id="right-icon" class="style-scope ytd-compact-link-renderer" disable-upgrade="" hidden="">
        </yt-icon>
        <yt-formatted-string id="secondary-text" class="style-scope ytd-compact-link-renderer"></yt-formatted-string>

  </paper-item>
    </a>
  </ytd-compact-link-renderer>

Answer 1

您可以定义自己的功能，并根据内容进行选择。 此代码将匹配“包含”某些文本的元素，它不是一个完整的内容匹配，只是部分而不区分大小写

jQuery.expr[':'].contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

var text = "Creator Studio"
var my_element = $('ytd-compact-link-renderer').find('yt-formatted-string:contains("'+text+'")');
my_element.doStuff();

选中此fiddle

如果您想要完整匹配，请使用此

//name your function as you like
jQuery.expr[':'].containsOnly = function (a, i, m) {
    return jQuery(a).text().toUpperCase() == m[3].toUpperCase();
};

Answer 2

如果您正在使用Jquery，我建议$("#label").parent().parent().parent().doStuff()看起来有点乱。第一个父级选择<paper-item>，第二个选择<a>，第三个选择<ytd-compact-link-renderer>。这有点清洁$("#label").parent('ytd-compact-link-renderer').doStuff()。有关更多方法，请参阅this link。

Answer 3

您可以尝试类似

的内容

var tag = $("#label:contains('Creator Studio')").closest('ytd-compact-link-renderer')

这将返回 ytd-compact-link-renderer 标记。现在，您可以使用标记变量

执行任何操作

Answer 4

  

我想选择“ytd-compact-link-renderer”标签，如果你   注意，在内部，它有一个“yt-formatted-string”标签   id =“label”，innerHTML是“Creator studio”。

您希望选择ytd-compact-link-renderer标记，其中包含 id {{1}的子元素（非直接后代）yt-formatted-string } label是innerHTML

您可以使用jquery "Creator studio".和has

contains

<强>演示

var element  = $("ytd-compact-link-renderer:has(yt-formatted-string:contains('Creator Studio'))");

var element  = $("ytd-compact-link-renderer:has(yt-formatted-string:contains('Creator Studio'))");

console.log( element.length ); //validate if correct node is fetched

Answer 5

如果要选择某些内容，请尝试使用jQuery的closest()函数：

var label = $('yt-formatted-string#label:contains("Creator Studio")');
label.closest('ytd-compact-link-renderer').addClass('selected');

选中此jsFiddle