Question

那是可能的，还是这里根据同化属性值选择元素的一种方法吗？

我有一个要获取ID值的元素：

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

选择元素，其属性类似于同级组件属性[选择器]

1 个答案: