jQuery和改變HTML輸出

Question

我有一個名爲shop_attributes

結構的表類如下：

<table class="shop_attributes"> 
    <tbody> 
    <tr class=""> 
     <th>Reserved</th> 
     <td> 
     <p>false</p> 
     </td> 
    </tr> 
    <tr class="alt"> 
     <th>Show Terms And Conditions</th> 
     <td> 
     <p>true</p> 
     </td> 
    </tr> 
    </td> 
    </tr> 
    </tbody> 
</table> 

使用jQuery我想要的虛假每個實例更改爲不和的每個實例是的。

我有下面的代碼，那裏還沒有。任何人都可以在這裏提出問題。

(function($) { 
    $(document).ready(function() { 
     if ($('#tab-additional_information > table > tbody > tr:nth-child(2) > td > p').val() == "true" { 
      $('#tab-additional_information > table > tbody > tr:nth-child(2) > td > p').replaceWith("Yes") 
     } 
    }); 
}(jQuery)); 

Answer 1

從我的評論：p標籤不返回val()。使用text()或html()

而且，由於沒有其他人覆蓋它的text()（和.html()）功能允許您提供一個函數作爲參數，而不是一個值。該函數的返回值用於替換文本。

這意味着你可以將其降低到：

$('table.shop_attributes p').text(function() { 
    if ($(this).text() == 'false') return 'no'; 
    if ($(this).text() == 'true') return 'yes'; 
}); 

甚至更​​短（如果該值只有true和false）：

$('table.shop_attributes p').text(function() { 
    return $(this).text() == 'true' ? 'yes' : 'no'; 
}); 

Answer 2

段落沒有值。您需要.text()。

您可能還希望設置文本.text("Yes")而不是用文本節點替換整個段落元素。

Answer 3

如上所述，val()用於輸入。在處理段落時，您希望使用text()或html()來讀取值。您可以簡單地循環和設置文本，而不是選擇每個元素。 （假定有表中沒有其他段落）

$(".shop_attributes p").each(
 
    function() { 
 
    var p = $(this); 
 
    var txt = p.text(); 
 
    var updated = txt === "true" ? "yes" : "no"; 
 
    p.text(updated); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="shop_attributes"> 
 
    <tbody> 
 
    <tr class=""> 
 
     <th>Reserved</th> 
 
     <td> 
 
     <p>false</p> 
 
     </td> 
 
    </tr> 
 
    <tr class="alt"> 
 
     <th>Show Terms And Conditions</th> 
 
     <td> 
 
     <p>true</p> 
 
     </td> 
 
    </tr> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

正如評論所指出的那樣，你不能使用.val()更改段落元素的含量。另外，正如我在評論中指出的那樣，您的代碼中存在拼寫錯誤和錯誤。校正所有這一切，以下工作：

$('table.shop_attributes p').each(function() { 
 
    if ($(this).text() == 'false') $(this).text('no') 
 
    if ($(this).text() == 'true') $(this).text('yes') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="shop_attributes"> 
 
    <tbody> 
 
    <tr class=""> 
 
     <th>Reserved</th> 
 
     <td> 
 
     <p>false</p> 
 
     </td> 
 
    </tr> 
 
    <tr class="alt"> 
 
     <th>Show Terms And Conditions</th> 
 
     <td> 
 
     <p>true</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>