क्या यह संभव है और यहां सिबलिंग एट्रिब्यूट वैल्यू के अनुसार तत्व का चयन करने का एक तरीका भी है?

जैसा कि मेरे पास तत्व है जिसके द्वारा मैं आईडी मान प्राप्त करना चाहता हूं:

<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();  
}
0
Nerius Jok 21 फरवरी 2019, 11:17

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
Boy 21 फरवरी 2019, 09:26