Question

我有一个看起来像这样的li元素：

<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>

当我点击它时，我想得到'熊'这个名字，或者将'蜜蜂'这个文字变成一个变量（知道如何做到这一点会很有帮助）。我怎么能用jQuery选择器做到这一点？我尝试过很多东西，比如

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

和

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

和

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

等

Answer 1

使用.text()获取文字

$(this).text()

和.attr('name')获取名称

$(this).attr('name')

FIDDLE

Answer 2

您可以在点击事件上下文中使用$(this)，因为它与点击的元素相对应。

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

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

<强>代码

$('#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

此外，最好将数据属性用于自定义属性，以便验证文档并符合标准做法。

所以

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

应该是

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

要访问它，您可以使用.attr()或.data()方法

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

Answer 3

这很简单：

$('#myOL li').click(function(){
    $(this).addClass('active');
    var name = $(this).attr('name');
    var text = $(this).text(); 
});

Answer 4

那么，

 $('#selectbox .boxes')

在#selectbox中返回带有类框的所有元素的数组通过使用jQuery让您的生活更轻松，您可以做到这一点

$('#selectbox .boxes').click(function(){
  var tmp_name = $(this).attr('name');
  alert(tmp_name);
  alert($(this).text()); // bees
  alert($(this).html()); // bees
  // changes the attribute name of this li element which has class boxes and has been clicked.
  $(this).attr('name','Hello world!'); 
  // changes the inner html of this li element which has class boxes and has been clicked.
  $(this).html('Hello world!');

})

希望它有所帮助。

如何访问li元素的名称或值？

4 个答案: