We Keep Coding

WebdriverIO How to loop through a list of elements that is not an actual table or list

how can I loop through a list of elements that looks something like this.
(In this case I only need the length of the elements in the list, but other people might benefit from more info in regards to looping through the elements.)
Here is my code:
class Facilities {
get facilityCards() { return $('//*[#class="card-columns"]'); }
getFacilityCardCount() {
const fcs = this.facilityCards;
return fcs.$$('div').length;
}
}
export default new Facilities();
I do have this working in other portions of code where i'm working with an actual table. In that case the table tag is my main xpath, and the tr tag is what I search with. But with this scenario all I have to work with is div's
Please let me know if you would like more clarity.
Your help is most appreciated =)

As you know, the $$ api returns an array of elements. you can use any of the js array methods on this and loop through all the elements. You can do various operations on each element. Below is an example.
$('//*[#class="card-columns"]').$$('div').forEach(element => {
console.log(element.getText());
})

How to grab a class name from a specific ID using jQuery

I have an ID that has a class name such as...
<div id="nav" class="style">
I have an array containing all of my IDs called allIds. I'm trying to select an ID from it and then grab its class name. Here is what I have.
var grabClass = $("#"+allIds[0]).map(function()
{
return this.class;
});
I would expect var grabClass to be equal to style. However, if I console log grabClass it says...
[prevObject: b.fn.b.init[1], context: document]
Not exactly sure how to make grabClass equal to ID nav's class style.

Use the below to get class name
var grabClass = $("#"+allIds[0]).attr("class")

Please try this
$("#"+arr[0]).map(function(item){
console.info(this.className);
});
})();
We usually use map to iterate over a set of values in an array. However in this case if you iterate over set of arrays you will be getting the class of last id.
And the above approach is not suitable for iterating over multiple values.
You may want to have a look at this
http://jsbin.com/viyizohexa/edit?html,js,console,output
Hope this be of some help.
Happy Learning

Jquery if string matches value in array

The product page on my website displays the #productID within a string i.e "Product ID: 743961". Using jQuery I want to take this #productID string and compare it to the array of IDs. If the #productID matches an ID within the array I want to append a message.
<div id="productID"> Product ID: 743961 </div>
I was initially trying to do the following, but was struggling to get the desired results.
var myArray = [ 743961, 743963, 743965 ];
$( "#prod_code:contains('myArray')" ).css( "text-decoration", "underline" );
My array has over 2,000 items, so this may not be the best solution. I am aware that Ajax would be the best solution, but am unable to use it in this instance.

With such a large array it sounds like AJAX would be a better solution. However, if you must use this pattern, you would first need to grab the productId value from the text of the element and then you can determine if it exists in the array. Something like this:
var productId = $.trim($('#productID').text().split(':')[1]);
if ($.inArray(productId, myArray) >= 0)
$('#prod_code').css('text-decoration', 'underline');
This is obviously a rather simple example, you would most likely need more validation on the extraction of the productId to make it more robust.

Working with Data Attributes - Build a List & See if One Exists

I have 2 questions based on the graphic below:
How can I tell if one of the 'data-conversationmessageuserid' data attributes with a specific value exists - say 1000000003? I believe data selectors is what I need and have tried the following but its not working yet:
if($('#conversationsInBoxMessagesWrapperDIV')['data-conversationmessageuserid=1000000003']) {
// do something
}
How could I get all the 'data-conversationmessageuserid' data attributes into an array and the loop through them? I'm still playing with this code but its far from publishable. Trying to use .map
.map(function()
thankyou so much

Try:
if($('#conversationsInBoxMessagesWrapperDIV [data-conversationmessageuserid=1000000003]').length)
or
$('#conversationsInBoxMessagesWrapperDIV').find('[data-conversationmessageuserid=1000000003]') //Or children only to look at one level.
To get all the data values you could do:
var conversationmessageuserids = $('#conversationsInBoxMessagesWrapperDIV').children().map(function(){
return $(this).data('conversationmessageuserid');
}).get();

jQuery supports data attributes: http://api.jquery.com/data/
So you could do if($('#conversationsInBoxMessagesWrapperDIV').data('conversationmessageuserid') === 1000000003)

Add each div attributes in an array

I am trying to build an array containing some data-attributes that a div have. It looks like this.
<div class="myclass" data-test="hello"></div>
I've come this far, but not sure how to continue:
$('#container .myclass').each(function () { mArray. })
I have no idea what to with the array...
And the output I am looking for is
array 0
... test = hello...
or something like that.
I guess I could take all ITEMS by just writing them and adding, but it seems like there should be an easier way of doing so.

data() returns an object containing all the data attributes. Could that be something?
$('#container .myclass').data()

If your div has attributes beginning with the data-prefix (data-test="hello" data-info="some text.." and so on), you can store the values of all these attributes in an object with the jQuery data method, for example like this:
var myObject = $("div.myclass").data();

This is one possible solution , using map(): DEMO HERE
var dataTests =$('#container .myclass').map(function(){
return this.getAttribute('data-test');
}).get();
alert(dataTests[0]);//element 0