1

假设我有这个 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>

我想获取跨度标记之间的文本，并将其作为背景色应用于同一“li”内的“跨度”。

所以我尝试的是：

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);
            }
        }
});

不幸的是，它不起作用，它应用了“自定义颜色”类，但它不应用 css 规则。如果我将变量cornerColor 替换为实际颜色，则可以。所以我猜错误是在变量中获取跨度内的文本。任何帮助将非常感激。

谢谢

4

3 回答 3

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);
            }
        }
    });
});
于 2013-01-16T12:29:39.137 回答
1

当你这样做时，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/

于 2013-01-16T12:35:13.370 回答
0 
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/

于 2013-01-16T12:40:19.893 回答