Question

I have an li element that looks like this:

<ol id="selectbox">
    <li class="boxes" name="bears">bees</li>
    <li class="boxes" name="cakes">candles</li>
    <li class="boxes" name="wine">beer</li>
    <li class="boxes" name="spoon">fork</li>
    <li class="boxes" name="bench">chair</li>
    <li class="boxes" name="matches">fire</li>
    <li class="boxes" name="kindling">wood</li>
</ol>

When I click it, I would like to get the name ‘bears’, OR the text ‘bees’ into a variable (It would be helpful to know how to do both). How can I do this with jQuery selectors?
I’ve tried many things such as

var $radios = $('input[name="mybuttons"]');
$('#selectbox li').click(function(){
  var $btn = $(this).addClass('active');
  var idx = $btn.index();    
  var name = $('li['+idx+']').name();
});

and

var name = $('#li.active').name()

and

var name = $radios.eq(idx).prop('name')

etc.

Answer 1

You can use $(this) in the click event context as it corresponds to the element is clicked.

var name = $(this).attr('name');  // bears 

var val = $(this).text();       // bees

Code

$('#selectbox li').click(function(){
  var $this = $(this);
  var $btn = $this.addClass('active');
  var name = $this.attr('name');
  var txt = $this.text();
  console.log("Name Attribute - " + name + " :: Text - "+ txt); 
});

Working Fiddle

Also it is better to use data attributes for custom attributes so that the Document will be validated and compliant with the standard practices.

So

<li class="boxes" name="bears">bees</li>

Should look like

<li class="boxes" data-name="bears">bees</li>

to acces it you can use either .attr() or the .data() methods

var name = $this.attr('data-name');
var name = $this.data('name');