Question

我正在尝试选择和设计相同样式和/或类的元素。到目前为止，我发现这样做需要循环遍历元素数组，如下所示：

var examples = document.getElementsByClassName("example");

for (var i = 0; i < examples.length; i++) {
  examples[i].style.color = "cornflowerblue";
}

有没有办法在不必循环遍历这些元素并按索引单独选择它们的情况下执行此操作？我正在寻找jQuery等价物：

$(".example") // Chainable

for-loop示例

var examples = document.getElementsByClassName("example");

for (var i = 0; i < examples.length; i++) {
  examples[i].style.color = "cornflowerblue";
}

<p class="example">Example One</p>
<p>Example Two</p>
<p class="example">Example Three</p>
<p>Example Four</p>

Answer 1

Array
  .apply([], document.getElementsByClassName("example"))
  .forEach(function (elmNode) {
    elmNode.style.color = "cornflowerblue";
  })
;

Answer 2

正如评论中所提到的，你可以使用数组的forEach成员函数，如果它不是因为getElementsByClassName的返回值，当表现得像一个数组时，实际上是NodeList并没有内置forEach方法。

通过编写一个执行循环的小函数和另一个将对每个元素执行操作的函数，可以轻松避免这种情况。

以下代码将解决您提出的问题。

<强> 1。通用功能

function forEachNode(nodeList, func)
{
    for (var i=0, n=nodeList.length; i<n; i++) 
        func(nodeList[i], i, nodeList);
}

<强> 2。每个元素的功能

function itemCallback(elem, index, list)
{
    elem.style.color = 'cornflourblue';
}

第3。做实际的工作

function changeExampleElemStyles()
{
    var examples = document.getElementsByClassName('example');
    forEachNode(examples, itemCallback);
}

显然，对于一次性的＆＃39;要求对元素列表进行操作，这种方法过于冗长，并且可以更好地替换为您已经提供的代码。

在需要经常进行此操作的情况下，此代码会减少重复次数，并有助于使代码更容易快速阅读，同时还可以防止复制粘贴错误或其他不必要的错误。您只需为需要在元素列表上执行的每个任务编写函数＃2，然后获取列表并使用您编写的函数＃2获取forEachNode来处理列表。

jQuery总是一种选择，很自然。虽然仅仅针对一些功能包含一个100kb的库是相当大的过度杀伤力。：）

Answer 3

这不完全相同，但可以达到同样的效果。您可以在DOM中动态添加和修改样式表元素：

 private void btnAddPatientActionPerformed(java.awt.event.ActionEvent evt) {                                              
   try
   {
        String url = "jdbc:derby://localhost:1527/PAT_DB";

        //Only use these if the database has a username or password
        //String username = "";
        //String password = "";

        Connection con = DriverManager.getConnection(url);
        Statement stmt = con.createStatement();

        String Query = "INSERT INTO TBLPATIENTS (PATIENT_ID, FIRST_NAME, LAST_NAME, DATE_OF_BIRTH, SEX, ADDRESS, CITY, "
                + "POSTALCODE, CHARGE, PAID, DOCTOR_ID) VALUES ('"+PatientID_field.getText()+"', "
                + "'"+FirstName_field.getText()+"', '"+LastName_field.getText()+"', "
                + "'"+day_field.getSelectedItem()+month_field.getSelectedItem()+year_field.getSelectedItem()+"',"
                + " '"+Sex_field.getSelectedItem()+"', '"+Address_field.getText()+"', '"+City_field.getText()+"',"
                + " '"+PostalCode_field.getText()+"', '"+Charge_field.getText()+"',"
                + " '"+Paid_field.getSelectedItem()+"', '"+DoctorID_field.getText()+"')"; 

        stmt.execute(Query);

        JOptionPane.showMessageDialog(null, "Patient added to the database.");

        PatientID_field.setText(null);
        FirstName_field.setText(null);
        LastName_field.setText(null);
        day_field.setSelectedItem("00");
        month_field.setSelectedItem("00");
        year_field.setSelectedItem("0000");
        Sex_field.setSelectedItem("0");
        Address_field.setText(null);
        City_field.setText(null);
        PostalCode_field.setText(null);
        Charge_field.setText("0");
        Paid_field.setSelectedItem(0);
        DoctorID_field.setText(null);        


   }

   catch(SQLException ex)
   {
       JOptionPane.showMessageDialog(null, ex.toString());
   }

}

然后稍后将颜色更改为红色，只需执行以下操作：

var sheet = document.createElement('style')
sheet.innerHTML = ".example { color: cornflowerblue }";
document.body.appendChild(sheet);

http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

的更多信息

更新了代码段

sheet.innerHTML = ".example { color: red }";

var sheet = document.createElement('style')
sheet.innerHTML = ".example { color: cornflowerblue }";
document.body.appendChild(sheet);

Answer 4

可以使用CSS和JS完成。你需要做的是包装你的＆＃39; p＆＃39;另一个元素中的元素（例如div）并在这种情况下更改div的类。在CSS中，您将拥有更改p元素样式的父子css。

＆＃13;

document.changeStyle = function () {
    document.getElementById("parent").className = "turnStyleOn";
}

＆＃13;

.turnStyleOn .example {
    color: cornflowerblue;
}

＆＃13;

<div id="parent">
    <p class="example">Example One</p>
    <p>Example Two</p>
    <p class="example">Example Three</p>
    <p>Example Four</p>
</div>
<input type="button" value="Change Style" onclick="changeStyle();" />

＆＃13;

使用纯Javascript选择和修改元素集合而不进行循环

4 个答案: