用jquery更改標籤的屬性

我有這個html代碼，我想用jQuery編輯。下面是HTML。用jquery更改標籤的屬性

<html> 
    <head> 
    <title>JQuery Problem 1</title> 
    <script type="text/javascript" src="jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="problem1.js"></script> 
    </head> 
    <body> 
    <ol> 
     <li>Comp 250 
     <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>CGI</li> 
      <li>PHP</li> 
      <li>JavaScript</li> 
     </ul> 
     </li> 
     <li>Comp 345 
     <ul> 
      <li>Objects and classes</li> 
      <li>Static and constant members</li> 
      <li>Operator overloading</li> 
      <li>Templates</li> 
      <li>Inheritance</li> 
      <li>Polymorphism</li> 
     </ul> 
     </li> 
     <li>Comp 431 
     <ul> 
      <li>Perl language</li> 
      <li>File uploads and downloads</li> 
      <li>AJAX and JSON</li> 
      <li>Java Servlets</li> 
      <li>JSP</li> 
     </ul> 
     </li> 
    </ol> 
    </body> 
</html>

我想要做的就是編輯Ol列表的列表標記。所以我想編輯的標籤是

<li>Comp 250 
<li> Comp 345 
<li> Comp 431 

this is how i want them to be 
<li style="margin: 1em; font-weight: bold">Comp 250 
    <li style="margin: 1em; font-weight: bold">Comp 245 
    <li style="margin: 1em; font-weight: bold">Comp 431

來源

2010-02-28 Zerobu

有幾件事情：

使用css()設置樣式屬性;
因爲<ul>是列表元素中，大膽的將應用到子列表元素。

所以，你有兩個選擇：

裹在<span>文本;或
設置字體粗細大膽，那麼孩子列表元素字體粗細正常。

對於第一個，獲取文本節點只是有點棘手，但可以完成。嘗試：

$("ol > li").each(function() { 
    $($(this).contents()[0]).wrap("<span>").parent() 
    .css({margin: "1em", fontWeight: "bold"}); 
});

輸出是：

<ol> 
    <li><span style="margin: 1em; font-weight: bold;">Comp 250 </span> 
    <ul> 
     <li>HTML</li> 
     <li>CSS</li> 
     <li>CGI</li> 
     <li>PHP</li> 
     <li>JavaScript</li> 
    </ul> 
    </li> 
    <li><span style="margin: 1em; font-weight: bold;">Comp 345 </span> 
    <ul> 
     <li>Objects and classes</li> 
     <li>Static and constant members</li> 
     <li>Operator overloading</li> 
     <li>Templates</li> 
     <li>Inheritance</li> 
     <li>Polymorphism</li> 
    </ul> 
    </li> 
    <li><span style="margin: 1em; font-weight: bold;">Comp 431 </span> 
    <ul> 
     <li>Perl language</li> 
     <li>File uploads and downloads</li> 
     <li>AJAX and JSON</li> 
     <li>Java Servlets</li> 
     <li>JSP</li> 
    </ul> 
    </li> 
</ol>

另外，您可以更改字體重量在內部列表：

$("ol > li").css({margin: "1em", fontWeight: "bold"}) 
    .find("ul").css({fontWeight: "normal"});

來源

2010-02-28 02:11:52 cletus

的作品卻改變了一切大膽，我只想影響的第一個項目是比較250，Comp345，Comp431 – Zerobu 2010-02-28 02:14:20

我忘了提及，我正在做的任何jquery正在準備功能，將有所作爲？ – Zerobu 2010-02-28 02:16:42

將此增加到取消粗體子列表 '$（「OL李麗」）的CSS（{fontWeight設置：「正常」}）;' – 2010-02-28 02:17:48

用jquery更改標籤的屬性

回答

相關問題