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>

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 を実際の色に置き換えると、そうです。したがって、スパン内のテキストを取得する変数にエラーがあると思います。どんな助けでも大歓迎です。

ありがとう

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 に答える