如何基于子标签的innerHTML选择父标签？

Question

I want to select the "ytd-compact-link-renderer" tag and if you notice, deep inside, it has a "yt-formatted-string" tag with id="label" and the innerHTML is "Creator studio". This child tag is nested deep inside so it's like a grand child.

The "ytd-compact-link-renderer" tag has its class name common with other tags which I don't want to select. The only way to select it seems to be based on the innerHTML of it's grand child. Most likely, it is not possible to select it with CSS, so how can I select it with JavaScript or 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

You can define your own function, and select depending on the content. This code will match element which "contains" some text, it's not a whole content match, just partial and NOT case sensitive

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();

Check this fiddle

If you want a whole match, please use this

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

Answer 2

If you are using Jquery, I would suggest $("#label").parent().parent().parent().doStuff() which looks a bit messy. The first parent selects <paper-item> , the second selects <a> and the third selects <ytd-compact-link-renderer> . This is a bit cleaner $("#label").parent('ytd-compact-link-renderer').doStuff() . Refer to this link for more ways.

Answer 3

You can try something like

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

This will return you the ytd-compact-link-renderer Tag. Now you can do whatever you want to do with tag variable

Answer 4

I want to select the "ytd-compact-link-renderer" tag and if you notice, deep inside, it has a "yt-formatted-string" tag with id="label" and the innerHTML is "Creator studio".

Looks like you want to select ytd-compact-link-renderer tag which has a child element ( not direct descendant ) yt-formatted-string with id label and the innerHTML is "Creator studio".

You can use jquery has and contains

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

Demo

 var element = $("ytd-compact-link-renderer:has(yt-formatted-string:contains('Creator Studio'))"); console.log( element.length ); //validate if correct node is fetched 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 5

If you want to select the parent of something, try to use closest() function of jQuery:

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

Check this jsFiddle