Question

假设我有这个HTML：

    <ul>
       <li>
           <a>Item one</a>
           <small>#000000</small>
           <span class="corner"></span>
       </li>
       <li>
           <a>Item two</a>
           <small>#ffffff</small>
           <span class="corner"></span>
       </li>
    </ul>

我想在span标记之间获取文本，并将其作为背景颜色应用于同一'li'中的'span'。

所以我尝试的是：

jQuery(document).ready(function ($) {

    $("span.corner").addClass("custom-color"); //apply class custom-color to span


     if ($("span.corner").hasClass("custom-color")) { //if the span.corner has custom-color class do the next

           var cornerColor = $('.corner').prev('small').text(); //this should get the text between the 'small' tags

            if (cornerColor !== '') { //if there is some text between 'small' tags, apply it as a css rule to the 'corner.span'
                $('.corner').css('background-color', cornerColor);
            }
        }
});

不幸的是它不起作用，它应用了'custom-color'类，但它不适用于css规则。如果我将变量cornerColor替换为实际颜色，它会。所以我猜错误是在变量中获取跨度内的文本。任何帮助将不胜感激。

由于

Answer 1

jQuery(document).ready(function ($) {
    $("li").each(function(){
        $(this).find("span.corner").addClass("custom-color"); //apply class custom-color to span
        if ($(this).find("span.corner").hasClass("custom-color")) {
            var cornerColor = $(this).find('small').text();
            if (cornerColor) {
                $(this).find("span.corner").css('background-color', cornerColor);
            }
        }
    });
});

Answer 2

当您执行var cornerColor = $('.corner').prev('small').text();时，您将收集连接的所有small个标记的文本。基本上cornerColor = "#000000#fffff";这显然是无效的。

$("span.corner").addClass("custom-color"); //apply class custom-color to span
if ($("span.corner").hasClass("custom-color")) { 
  $('.corner').prev('small').each(function(){
    var cornerColor = $(this).text(); 
    if (cornerColor !== '') {
      $(this).next('.corner').css('background-color', cornerColor);
    }
  });
}

上面的代码使用.each来浏览每个小标记，将其带入内部文本并应用于旁边的span.corner。演示：http://jsfiddle.net/4Su4G/1/

Answer 3

jQuery(document).ready(function () {
 $("span.corner").addClass("custom-color"); //apply class custom-color to span
 if ($("span.corner").hasClass("custom-color")) {
   $('span.corner').each(function () {
     var cornerColor = $(this).prev('small').html();
     if (cornerColor) {
     $(this).css('background-color', cornerColor);
     }
   });
 }
});

请参阅：http://jsfiddle.net/nN6Nd/2/

jQuery - 在标记内部获取文本并将其用作css规则

3 个答案: