Question

我是jQuery的新手我正试图获得锚定价值，以转变它的父级李。

我正在尝试的代码：

jQuery('ul.menu').each(function(){
    var turnClass = jQuery(this).find("a").val();
    jQuery('ul.menu li').addClass(turnClass);
});

这是我想要做的：

<ul class="menu">
    <li class="home"><a href="#">Home</a></li>
    <li class="about-us"><a href="#">About Us</a></li>
    <li class="contact-us"><a href="#">Contact Us</a></li>
</ul>

Answer 1

您应该使用text或html方法而不是val，val用于获取/设置表单元素的值。

但这不是你脚本中唯一的问题，你应该遍历li元素而不是ul元素。我建议：

$('ul.menu > li').addClass(function() {
    return $(this).children('a')
                  .text()
                  .trim()
                  .toLowerCase()
                  .replace(/\s+/g, '-');
});

http://jsfiddle.net/guh1g61d/

Answer 2

使用.text（），而不是.val（）。 .text（）抓取元素中的任何文本，.val（）从表单元素的'value'属性中获取值

Answer 3

.val()用于获取输入元素的值，它不能与锚一起使用。如果您希望锚内的文本，请使用.text()。然后，您需要.each()循环来处理每个li，而不是整个ul.menu。

jQuery('ul.menu li').each(function() {
    var turnClass = $(this).find('a').text();
    turnClass = turnClass.replace(/ /g, '-').toLowerCase();
    $(this).addClass(turnClass);
});

Answer 4

你很亲密。您需要使用text()来查找锚文本，并使用closest()来查找父元素。您也可以直接在初始查询中搜索a代码。

在示例中，我还将类文本放在较低的位置，并将替换为-，如示例类中所示。

jQuery('ul.menu a').each(function(){
  var newClass = jQuery(this).text().replace(/\s+/g,'-').toLowerCase();
  jQuery(this).closest('li').addClass(newClass);
});

.about-us {
  color: green; 
}

.home {
  color: red;
}

.contact-us {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

将锚值转换为父li类

4 个答案: