卸下按钮'；除按钮列表中的最后3个按钮外，如果没有其他选项，则可以使用纯javascript_Javascript_Html_Css

卸下按钮'；除按钮列表中的最后3个按钮外，如果没有其他选项，则可以使用纯javascript

javascript html css

卸下按钮'；除按钮列表中的最后3个按钮外，如果没有其他选项，则可以使用纯javascript,javascript,html,css,Javascript,Html,Css,我有3套按钮，每套包含9个按钮堆叠在3列中，放在这里的9个按钮中。我已经删除了按钮的底部边框，以避免出现双边框，因为它们彼此堆叠在一起，没有任何间隙（边距、填充）。我试图实现的是保留最后3个按钮的底部边框这是我的初始代码：（不工作） var lo=document.querySelectorAll（'ol'）；对于（var h=0；h

我有3套按钮，每套包含9个按钮堆叠在3列中，放在这里的9个按钮中。我已经删除了按钮的底部边框，以避免出现双边框，因为它们彼此堆叠在一起，没有任何间隙（边距、填充）。我试图实现的是保留最后3个按钮的底部边框

这是我的初始代码：（不工作）

var lo=document.querySelectorAll（'ol'）；
对于（var h=0；h（按钮长度-3））{
document.getElementsByTagName（“按钮”）.style.borderBottom='2px纯红'；
}
}
}
}


函数removeBottomBorderExceptLast3（）{
var collectionOfLists=document.getElementsByTagName（“ol”）；
对于（var i=0；i一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八
十九,
二十
二十一,
二十二
二十三
二十四
二十五
二十六
二十七
移除BottomBorderExcepletast3（）；

代码中有几个错误导致它无法工作

我已经重命名了一些变量，以便于随时查看我们正在处理的内容。你需要检查我的条件语句是否正确，因为我不能完全确定你想在哪个按钮下面划线

//get all the ol elements into allOls
var allOls = document.querySelectorAll('ol');
for (var h = 0; h < allOls.length; h++) {

    // get all the li elements within a particular ol into lis
    var lis = allOls[h].querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {

        //get all the button elements within this particular li into buttons
        var buttons = lis[i].querySelectorAll('button');
        for (var j = 0; j < buttons.length; j++) {
            if (j > (buttons.length-3)) {//IS THIS THE RIGHT CONDITION?
                buttons[j].style.borderBottom = '2px solid red';
            }
        }
    }
}

//将所有ol元素放入allol
var allOls=document.queryselectoral（'ol'）；
对于（var h=0；h（buttons.length-3））{//这是正确的条件吗？
按钮[j].style.borderBottom='2px纯红'；
}
}
}
}

我使用@Umit Can-Cukadar解决方案实现了这一功能，但我认为该功能内部的逻辑是多余的。如果有人能简化或缩短它，我是开放的

我的解决方案：脚本

        function removeBottomBorderExceptLast3(listName, listName2, listName3) {
        var myOl = document.getElementById(listName).getElementsByTagName("ol");
        for(var i = 0; i < myOl.length; i++) {

            var myLi = document.getElementById(listName).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
        var myOl2 = document.getElementById(listName2).getElementsByTagName("ol");
        for(var i = 0; i < myOl2.length; i++) {

            var myLi = document.getElementById(listName2).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
        var myOl3 = document.getElementById(listName3).getElementsByTagName("ol");
        for(var i = 0; i < myOl3.length; i++) {

            var myLi = document.getElementById(listName3).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
    }

函数removeBottomBorderExceptLast3（listName、listName2、listName3）{
var myOl=document.getElementById（listName）.getElementsByTagName（“ol”）；
对于（变量i=0；i


身体
<body onload="removeBottomBorderExceptLast3('myList', 'myList2', 'myList3');">
<div id="myList">
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList2"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList3"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>


这是按钮1
这是按钮2
这是按钮3
这是按钮4
这是按钮5
这是6号按钮
这是按钮7
这是8号按钮
这是9号按钮








这是按钮1
这是按钮2
这是按钮3
这是按钮4
这是按钮5
这是6号按钮
这是按钮7
这是8号按钮
这是9号按钮








这是按钮1
这是按钮2
这是按钮3
这是按钮4
这是按钮5
这是6号按钮
这是按钮7
这是8号按钮
这是9号按钮
为什么不用css删除最后3个按钮的边框？我已经删除了。我说的是保留而不是删除。您应该在文档中的浏览器开发工具控制台中看到一个错误
<body onload="removeBottomBorderExceptLast3('myList', 'myList2', 'myList3');">
<div id="myList">
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList2"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList3"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>