как работать с первыми элементами с определенным атрибутом?

//получаем все элементы со значением атрибута style 'display: none;' 
var elements = jQuery('[style = "display: none;"]'); 
 
//выбираем первые четыре элемента 
for (var i = 0; i < 4; i++) { 
  console.log(elements[i]); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <div>item</div> 
    <div>item</div> 
    <div style="display: none;">item 1</div> 
    <div style="display: none;">item 2</div> 
    <div style="display: none;">item 3</div> 
    <div style="display: none;">item 4</div> 
    <div style="display: none;">item 5</div> 
    <div style="display: none;">item 6</div> 
    <div style="display: none;">item 7</div> 
    <div style="display: none;">item 8</div> 
</div>

var elements = $(".wrapper div").filter(function() { 
    return $(this).css('display') == 'none'; 
}).slice(0,4); 
 
elements.css("display","block").html("hello")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <div>item</div> 
    <div>item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
    <div style="display: none;">item</div> 
</div>