Can't get the value of the index from the contents of a looped data attribute

Question

Below is my snippet, so to sharpen the details, first I loop through each data attribute that the current clicked element has, get the contents and split it per "%" as separator and loop on each split contents. Now, what I'm trying to do is alert the content that has and index of '0' (you can see on the 'if' statement that if the index '0' then alert the index[0] value) but seems not working or not even pass on the provided if statement. Any ideas, clues, suggestions, recommendations, help please?

 $(document).ready(function(){ $("button").click(function(){ $.each($(this).data(),function(index,value){ if(index !== "plugin_ripples"){ var classList = value.split("%"); $.each(classList, function(index, item) { alert("index: "+index+" index value: "+item); if(index[0]){ alert(index[0].item); } }); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-name="test%jason%kayko" data-test="test 2">test</button> 

Answer 1

Since no one gives me a different approach in regards of what I'm trying to achieve, so then I create a different approach for myself to cater my needs and requirements and what I did is to hook it up with an array, check my snippet below.

 $(document).ready(function(){ $("button").click(function(){ $.each($(this).data(),function(index,value){ if(index !== "plugin_ripples"){ var classList = value.split("%"); var data_items = []; $.each(classList, function(index, item) { data_items.push(item); }); if(data_items[0] === "null"){ alert(data_items[0]); } } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-name="test%jason%kayko" data-test="test 2">test</button>