css属性を子要素に設定しません。 Jquery

-1

私はの内部にdivを持っています。テーブルのtd要素の中には、テキストと、「actionLink」クラスが割り当てているリンクがあります。css属性を子要素に設定しません。 Jquery

JQueryを使用して、内のtdとp要素にいくつかの属性値を変更します。すべて正常に動作しますが、リンクの属性値も変更されます。

a要素に影響を与えずにこの属性を変更する方法はありますか。

これは私が

はJavaScript

$('.sectionContent').css("color", $('#ParagraphForegroundColor').val()); 
    $('.sectionContent').css("background-color", $('#ParagraphBackgroundColor').val()); 
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", $('#ParagraphFontFamily').val()); 
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", $('#ParagraphFontSize').val()); 
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", $('#ParagraphFontStyle').val()); 
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", $('#ParagraphFontWeight').val()); 
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", $('#ParagraphTextDecoration').val());

出典

2011-06-22 Omar

？あなたはhttp://www.jsfiddle.netにすべてのコードを投稿することができるので、htmlも見ることができますか？ – Neal

'a' taqgsは' td'の中にあります。ページは動的に生成されます。 – Omar

あなたは "actionLink"クラスについて話しますが、これはあなたのjQueryセレクタのどこにもありません。 –

は実は、私はそれはdoesnのように、あなたは、単にCSSのクラスActionLinkのを定義する必要があると思いますTDを含むTDのプロパティを継承しません。

.actionLink{ 
font-family:vlaue; 
font-size:vlaue; 
font-weight:vlaue; 
font-style:vlaue; 
text-decoration:vlaue; 
}

EDITなどの

何か：たとえば

が、これは正常に動作します：あなたは `A`タグを選択

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('.sectionContent').css("color", 'blue'); 
      $('.sectionContent').css("background-color", 'red'); 
      $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", '"Times New Roman",Georgia,Serif'); 
      $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", '11pt'); 
      $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", 'normal'); 
      $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", 'normal'); 
      $('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", 'none'); 
     }); 
    </script> 
    <style> 
     .actionLink{ 
      font-family:Arial; 
      font-size:6pt; 
      font-weight:bold; 
      font-style:normal; 
      text-decoration:underline; 
      background-color:white; 
      color:black; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="sectionContent"> 
     <table> 
      <tr> 
       <td> 
        Some Test 
        <a class='actionLink'>Action</a> 

       </td> 
      </tr> 
     </table> 
     <p>Some Content</p> 
    </div> 
    </body> 
</html>

出典

2011-06-22 16:50:40

その場で右。私はそのクラスにいくつかの他の属性を設定していましたが、私がJavsScriptで変更したものではありません – Omar

持っているものを更新です：あなたのセレクタをより詳しく見ると、あなたが示されてきたセレクタが全くない限り任意のa要素と一致しません彼らは "sectionContent"クラスを持つすべての要素に適用される最初の2行と一致する "sectionContent"クラスを持っています。しかし、残りの5行は、だけがpとtdの要素を明確に選択するため、a要素には（直接的な）影響はまったくありません。

もちろん間接的な影響を与える可能性があります。 a要素がpまたはtdのフォント設定を継承している場合は、pまたはtdのフォント設定を変更すると、継承されているため間接的にaに影響します。それはもはや継承しないように、明示的にフォント設定をa要素に設定する以外の方法ではありません。例えば

：

CSS：

p { 
    font-family: serif; 
} 
a.actionLink { 
    font-family: sans-serif; 
}

HTML：

<p>This is the paragraph with <a href="#" class="actionLink">an 'actionLink' link in it</a>.

JavaScriptを：それは継承されたため

$("p").css("font-weight", "bold");

今リンクは、太字であり、そのfont-weightをその親要素から削除します。これとは対照的に：それはその自身font-family設定を持っているので、a要素には影響を与えません

$("p").css("font-family", "Comic Sans"); // Hey, I had to do it

。

オリジナルの答え：

一般的に、あなたのマークアップを見ることなく、具体的に答えるが、それにハード：あなたはとは、特定のタグを持つクラスを持っている唯一のマッチ要素にあなたのセレクタを設定することができます例えば、：

// Matches *all* elements with the class "className" 
$(".className") 

// Only matches `p` elements with "className" 
$("p.className") 

// Only matches `td` and `p` elements with "className" 
$("p.className, td.className")

jQueryはほぼすべてのCSS3セレクタをサポートしています。詳細：

jQuery Selectors
CSS3 Selectors
CSS2.1 Selectors（ただし、CSS3のものは、これを優先する）

出典

2011-06-22 16:45:47

css属性を子要素に設定しません。 Jquery

答えて

関連する問題