выберите элемент, где его атрибут, такой как атрибут компонента родного брата [селекторы]

Question

Это возможно, а также здесь можно выбрать элемент в соответствии со значением атрибута sibbling?

КАК у меня есть элемент, по которому я хочу получить значение идентификатора:

<tr amount=1 prid="product_1-2">

Исравните с братьями и сестрами, которые выглядят так:

<tr amount=2 id="item_23_product_1-2">

Я хочу переключать пустые элементы tr и их братья в соответствии с атрибутом сходства.Как правильно выбрать оба, теперь у меня есть это:

tr[amount=''], tr[amount=''] ~ tr[id$=sibling_attribute_id]

Я не могу обернуть внутри tbody (уже используется по той же причине).

Функция переключения:

const toggleEmpty = ({target}) => {
  const selector = 'tr[amount=""], tr[amount=""] ~ tr[id$=child id]'
  if (target.getAttribute('name') == 'show_empty')
    $(selector).show();
  else
    $(selector).hide();  
}

Answer 1

Вот как это можно сделать с помощью XPath, но вам нужно будет добавить свою логику "show_empty", если вам нужна помощь, спросите.

const hide  = function (target) {
    let prid = target.getAttribute("prid");
    let nodesSnapshot = document.evaluate("./*[substring(@id,string-length(@id) -string-length('" + prid + "') +1) = '" + prid + "']",
        target.parentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

    for ( let i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
        // let itemElement = nodesSnapshot.snapshotItem(i);
        // console.dir(itemElement);
        nodesSnapshot.snapshotItem(i).style.display = "none";
    }
};

<table>
    <tbody>
        <tr prid="product_1-2" onclick="hide(this)">
            <td>prid product_1-2</td>
        </tr>
        <tr id="item_1_product_1-2">
            <td>item_1_product_1-2</td>
        </tr>
        <tr id="item_2_product_1-2">
            <td>item_2_product_1-2</td>
        </tr>
        <tr id="item_3_product_1-3">
            <td>item_3_product_1-3</td>
        </tr>
        <tr id="item_4_product_1-3">
            <td>item_4_product_1-3</td>
        </tr>
    </tbody>
</table>