Question

<ul class="slist single required" id="list-fieldtype" data-vt-name="list-fieldtype" >
            <li style="float:none;"><a class="sbox selected" data-vt-value="type_text" data-vt-selected="1">Text</a></li>
            <li style="float:none;"><a class="sbox" data-vt-value="type_number" data-vt-selected="0" >Number</a></li>
            <li style="float:none;"><a class="sbox" data-vt-value="type_date" data-vt-selected="0" >Date</a></li>
            <li style="float:none;"><a class="sbox" data-vt-value="type_yesno" data-vt-selected="0" >Yes/No</a></li>
            <li style="float:none;"><a class="sbox" data-vt-value="type_multi" data-vt-selected="0" >Multiple Choice Answers</a></li>
        </ul>

var $selected = $('.selected');
var new_fieldtype= $("#list-fieldtype").find( $selected ).removeClass('selected'); //this works


var new_fieldtype= $("#list-fieldtype>li>a").find( $selected ).data('vt-selected','0'); // does not work
         $("#list-fieldtype").find( 'type_text' ).addClass('selected'); // does not work
         $("#list-fieldtype>a[data-vt-value=type_text]").addClass('selected'); // does not work 

How do i make the last three statements work ?? any ideas ?

thanks

Answer 1

.data() can only be used to get the value of data attributes, not set them. You have to use .attr() to set the value of attributes.

 $selected.attr('data-vt-selected', 0);

If your data attibute key if data-vt-value, the key to pass to .data() is vtValue

 var value = $selected.data('vtSelected');

For the last statement, the selector is wrong: the anchor is not a direct child of the UL !

$('#list-fieldtype > a[data-vt-value=type_text]')
// should be
$('#list-fieldtype a[data-vt-value=type_text]')

DEMO

Note it is pointless to do $("#list-fieldtype").find( $selected ). $selected is already the element you want to work with, so use it directly.