クエリ結果のリストのdiv要素に異なるクラスを追加する

Question

クエリの結果に異なるdivスタイルを適用するにはどうすればよいですか？

結果のリストで、その内容に基づいてdivのスタイルを設定したいと思います。

例：この結果リストでは、鳥の名前を付けたすべての結果に、動物の異なるdivのスタイルが必要です。

1. Cow 
2. Hen 
3. Chick 
4. Goat 
5. Lion 
6. Duck 

CSS：

.birds{ 
    background:yellow; 
} 

.animals{ 
    background:red; 
} 

は非常に特異的である：チャットメッセージで

例..あなたは、送信者と受信者の間でのメッセージの異なるスタイルを見つけることができます。私が知っていることのために、彼らは基準に従ってすべてのメッセージを取り出した。 私はちょうどそれ

if ($result->num_rows > 0) { 
    // output data of each row 

     while($row = $result->fetch_assoc()){ 

     echo '<div id="listOfMessages" class="">'.$row["sender"].":".$row["entry"]."<hr>". $row["date"].'</div>'."<hr>"."<br>"; 
     echo "<script> applyStyle();</script>"; 

     } 

} else { 
    echo "You don't have any converstaion with this user... send the message to start conversation with him/her"; 
} 

をしようとした上記のコードは私にすべてのメッセージのリストを与え、私はJSは、以下のjs関数としてdivのスタイルにすることを追加しました：

関数applyStyle（）{

if($("#listOfMessages:contains('badshah')")){ 
$("#listOfMessages").addClass("sender"); 
}else{ 
$("#listOfMessages").addClass("receiver"); 
} 
} 

を

これは動作しますが、最初の結果（メッセージ）のみですが、次のメッセージはすべてこの機能でスタイリングされません。

ありがとうございます！

Answer 1

var animals = ["Cow", "Hen", "Chick", "Goat", "Lion", "Duck"]; 
 
var creatureMap = { 
 
    "birds": ["Hen", "Chick", "Duck"], 
 
    "animals": ["Cow", "Goat", "Lion"] 
 
}; 
 

 
var classifications = { 
 
    "Hen": "birds", 
 
    "Chick": "birds", 
 
    "Duck": "birds", 
 
    "Cow": "animals", 
 
    "Goat": "animals", 
 
    "Lion": "animals" 
 
}; 
 

 
function render(entries, keep) { 
 
    var render = document.getElementById('render'); 
 

 
    if (keep) { 
 
    render.innerHTML = ''; 
 
    } 
 

 
    entries.forEach(function(entry) { 
 
    var div = document.createElement("div"); 
 
    div.innerHTML = entry; 
 
    div.className = classifications[entry] || "animals"; 
 
    render.appendChild(div); 
 
    }); 
 
}; 
 

 
render(animals);

.birds { 
 
    background: yellow; 
 
} 
 

 
.animals { 
 
    background: red; 
 
}

<div id = "render"></div>

それとも

.birds{ 
 
     background:yellow; 
 
     } 
 

 
    .animals{ 
 
     background:red; 
 
    }

<div class="animals"> 
 
    <div>Cow</div> 
 
    <div class="birds">Hen</div> 
 
    <div class="birds">Chick</div> 
 
    <div>Goat</div> 
 
    <div>Lion</div> 
 
    <div class="birds">Duck</div> 
 
    
 
</div>

Answer 2

Woow !!! ...私はソリューションを得ました

私のデータベーステーブルには、以下の例の3つのカラムがあるので、

| タイプ |         グループ       | record_date |
| Cat         |      動物            |   22-12-2017 |
|鶏        |    鳥                    |   12-09-2017 |

私はこれをやってみました...

if ($result->num_rows > 0) { 
    // output data of each row 

     while($row = $result->fetch_assoc()){ 

     if($row["group"]=="animal"){ 

     echo '<div id="list" class="animals">'.$row["type"]."<hr>". $row["record_date"].'</div>'."<hr>"."<br>"; 
     }else{ 

     echo '<div id="list" class="birds">'.$row["type"]."<hr>". $row["record_date"].'</div>'."<hr>"."<br>"; 
     } 


     } 

} else { 
    echo "You don't have any animal/bird recorded"; 
} 

それは働きました！