javascript - 选择其属性类似于兄弟组件属性 [选择器] 的元素

Question

这是否可行，也是一种根据同级属性值选择元素的方法？

因为我有要获取 id 值的元素:

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

与看起来像的 sibling 相比:

<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>