jQuery get multiple data from custom attribute

Question

I have a select element and i wanna take some custom data from this. I don't know if this syntax is right but is possible to get the data??

<select data-select="placeholder:This is title; width:300px; dissabled; hidden;"></select>

If the attribute have inside colon [ : ] , the left part i wanna use it something like new attribute and the right part as the value of this
The semicolon [ ; ] is used to break this new attributes
The logic is like the style attribute

The code i wanna have this form:

$("[data-selectlist]").each(function(){
    var $ul = $("<ul/>", {
        'placeholder': $(this).attr('placeholder'),
        'width' : $(this).attr('width')
    });
    .
    .
    .
});

With what i can replace the .attr() to have the desired result??

Your "jQuery to get the data like this" has nothing to do with your question. Try to be more specific. Show the JS that actually gets some data. Describe your desired output. Please read How to Ask. — Roko C. Buljan
– Roko C. Buljan, Commented Aug 19, 2018 at 13:14
I'm just confused why on earth would you ever want to make a <ul> element hidden, disabled etc. An <ul> cannot be disabled and have width attribute :) — Roko C. Buljan
– Roko C. Buljan, Commented Aug 19, 2018 at 14:08
It was just to test non colon attributes. I wanna create a custom select option with full features xD — Giroku
– Giroku, Commented Aug 19, 2018 at 14:42

Roko C. Buljan · Accepted Answer · 2018-08-19 14:03:19Z

1

Access every $("[data-select]") element .attr("data-select")
iterate the value and create an object like {attr1:val, attr2:val}
Apply the created attributs object to the same (or some) element: $(this).attr(attrObj) or $("<ul/>", {attr: attrObj})

$("[data-select]").attr("data-select", function(i, data) {

  if ( !data ) return; // Early return
  
  // Convert data values to attributes object
  const attrObj = data.match(/(?!\s)[^;]+/g).reduce((acc, cur) => {
    const p = cur.split(":");
    acc[p[0]] = p[1] || p[0];
    return acc;
  }, {});

  console.log(attrObj);
  
  // Apply attributs object to element
  $(this).attr(attrObj)

});

Select is now hidden! Inspect element to see the attributes applied!<br>
<select data-select="placeholder:This is title;   width:300px; disabled; hidden;">
  <option>test</option>
</select>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

edited Aug 19, 2018 at 14:03

answered Aug 19, 2018 at 13:57

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery get multiple data from custom attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related