There is html code on the page (dynamic)

<div class="mes-cont" id="chat-window"> <div class="mes mine" id="pm4436" data-id="4436"></div> <div class="mes mine" id="pm4438" data-id="4438"></div> <div class="mes " id="pm4446" data-id="4446"></div> <div class="mes mine" id="pm4449" data-id="4449"></div> <div class="mes " id="pm4450" data-id="4450"></div> <div class="mes mine" id="pm4451" data-id="4451"></div> <div class="mes " id="pm4452" data-id="4452" style="background-color: #E7E7E7 !important;"></div> <div class="mes " id="pm4453" data-id="4453" style=""></div> <div class="mes " id="pm4455" data-id="4455" style="background-color: #E7E7E7 !important;"></div> <div id="new_id"></div> <div class="mes " id="pm4456" style="background-color: #E7E7E7 !important;"></div> </div>

The code below finds all the data-id and forms an array of them.

 <script language="javascript"> var ArrList = $("#chat-window .mes").map(function(){ return $(this).attr("data-id"); }).get(); alert(ArrList); </script>

You need to change the code in javascript so that it adds the data-id to the array only under the condition that style = "", or the style is completely absent ...

    1 answer 1

    Use :not to select elements without attributes, use [style=''] to select empty attributes and use the selector union: #chat-window .mes:not([style]), #chat-window .mes[style='']

     var ArrList = $("#chat-window .mes:not([style]), #chat-window .mes[style='']").map(function(){ return $(this).attr("data-id"); }).get(); console.log(ArrList); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mes-cont" id="chat-window"> <div class="mes mine" id="pm4436" data-id="4436"></div> <div class="mes mine" id="pm4438" data-id="4438"></div> <div class="mes " id="pm4446" data-id="4446"></div> <div class="mes mine" id="pm4449" data-id="4449"></div> <div class="mes " id="pm4450" data-id="4450"></div> <div class="mes mine" id="pm4451" data-id="4451"></div> <div class="mes " id="pm4452" data-id="4452" style="background-color: #E7E7E7 !important;"></div> <div class="mes " id="pm4453" data-id="4453" style=""></div> <div class="mes " id="pm4455" data-id="4455" style="background-color: #E7E7E7 !important;"></div> <div id="new_id"></div> <div class="mes " id="pm4456" style="background-color: #E7E7E7 !important;"></div> </div>

    • Yes, that's right, thanks a lot, it works ... - skillful
    • and how to find all the # chat-window .mes blocks of a certain color (background-color), for example, with the color # E7E7E7? - skillful
    • [pre] var ArrList = $ ("# chat-window .mes: not ([style]), # chat-window .mes [style = '']"). map (function () {return $ (this). attr ("data-id");}). get (); console.log (ArrList); [/ pre] - skillful