I have this jQuery code:

$(".q-block-container").prev(".sub-block-container").css("border-bottom","none");

I need a pure JavaScript equivalent, whereby I can select the previous sibling ONLY if it matches the selector (in this case .sub-block-container).

For example, lets say I have a list and each item in the list has a border-bottom style. Depending in what the sibling is before a particular list item, that should determine whether or not the border should be applied:

<ul>
    <li class="q"></li>
    <li class="q"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="s"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="q"></li>
</ul>

In this example, a border must NOT appear on the previous sibling <li> element if:

• the element is q and the previous sibling is s

• the element is s and the previous sibling is q

• the element is s and the previous sibling is s

I have this jQuery code:

$(".q-block-container").prev(".sub-block-container").css("border-bottom","none");

I need a pure JavaScript equivalent, whereby I can select the previous sibling ONLY if it matches the selector (in this case .sub-block-container).

For example, lets say I have a list and each item in the list has a border-bottom style. Depending in what the sibling is before a particular list item, that should determine whether or not the border should be applied:

<ul>
    <li class="q"></li>
    <li class="q"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="s"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="q"></li>
</ul>

In this example, a border must NOT appear on the previous sibling <li> element if:

• the element is q and the previous sibling is s

• the element is s and the previous sibling is q

• the element is s and the previous sibling is s

• javascript
• jquery

• May I ask why? This doesn't seem like an efficient thing to do. – Derek 朕會功夫 Commented Apr 29, 2017 at 23:04
• What's the efficient thing to do? – JoeTidee Commented Apr 29, 2017 at 23:06
• I have taken a look at your example. In this case, I assume your rows are programmatically generated. What is usually done is to assign classes directly to the elements that you wish to have certain property, ie in this case you would add a class with-border to elements that should have a border before they are put into the DOM. – Derek 朕會功夫 Commented Apr 29, 2017 at 23:21
• 1 Might help stackoverflow./questions/574904/… – Robert Commented Apr 29, 2017 at 23:30
• 1 The logic may be easier if the decision to apply a border is based on paring the content of an element with that of its next sibling. – traktor Commented Apr 29, 2017 at 23:37

2 Answers 2

Try this if your element .sub-block-container will have only that single class.

var elem = document.getElementsByClassName("q-block-container");
for (i=0; i<elem.length; i++) {
    var prev = elem[i].previousElementSibling;
    if (prev.className == "sub-block-container") {
        prev.style.borderBottom = "none";
    }
}

If your element may have more than one class, use this instead:

var elem = document.getElementsByClassName("q-block-container");
for (i=0; i<elem.length; i++) {
    var prev = elem[i].previousElementSibling;
    if (prev.classList.contains("sub-block-container")) {
        prev.style.borderBottom = "none";
    }
}

Maybe try this :

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

var elements = document.querySelectorAll('.q-block-container');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var previous = element.previousElementSibling;
    if(previous.matches('.sub-block-container')){
        previous.style.borderBottom = 'none';
    }
}​

So it is quite straightforward, you iterate over all the .q-block-container and if one's previous sibling matches the .sub-block-container selector, it changes its border-bottom

Edit :

Thank you Abraham Murciano Benzadon for pointing out an error in the code (semi-colons aren't required in JS tho, but it's best to keep the same code style)

Edit 2 :

Fixed the code to what you want