Question

在尝试使用@Michael Coker的方法时，我的代码目前看起来像这样：

的javascript：

ref.child(direction + '/' + airport).once("value", function(data) {
             data.forEach(function(snapshot) {
                 $("#ride").append('<p>' + snapshot.val().from + 'to: ' + snapshot.val().to + 'day: ' + snapshot.val().when + '</p>').addClass('style');
             });
});

的CSS：

.style{
    position: relative;
    padding: .100em;
    margin-left: 10%;
}

.style p{
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    margin-left: 40%;
    border: 12px solid #888;
    border-color: #c4d8e2;
}

HTML：

虽然它增加了每个p元素之间的填充，但仍然没有边界......

我对Jquery来说是全新的。我在我的javascript代码中使用Jquery在我的HTML页面中使用动态内容填充div。

我的javascript代码如下所示：

function postRides(direction, airport){
        console.log("I get called");
        var ref = firebase.database().ref();
        ref.on("value", function(snapshot) {
          }, function (errorObject) {
            console.log("The read failed: " + errorObject.code);
            });

         ref.child(direction + '/' + airport).once("value", function(data) {
             data.forEach(function(snapshot) {
                 $("#ride").append('<p>' + snapshot.val().from + 'to: ' + snapshot.val().to + 'day: ' + snapshot.val().when + '</p>').css('background-color', 'red');

});
}

我知道您可以使用.css为div赋予id =＆＃34;骑＆＃34;例如，背景颜色。但我不确定如何访问/更改此div中内容的外观。我希望每个字符串周围都有一个边框，每个字符串后面都有一个边距。我怎么能这样做？

Answer 1

您可以定位p中的#ride元素来应用您想要的任何CSS。我要做的不是使用$.css()，而是将一个类添加到修改背景颜色的#ride，然后使用同一个类来定位p中的#ride元素。

for (var i = 0; i < 5; i++) {
  $('#ride').append('<p>text</p>').addClass('red');
}

.red {
  background: red;
  padding: .5em;
}
.red p {
  border: 1px solid black;
  margin: .5em;
  padding: .5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="ride"></div>

Answer 2

我不清楚你问的是什么，但是如果你想为每个

元素添加边框，你可以简单地使用类似的东西，

$("#ride").append('<p style="border:1px solid #000; margin:5px">' 
   + snapshot.val().from 
   + 'to: ' 
   + snapshot.val().to 
   + 'day: ' 
   + snapshot.val().when 
   + '</p>').css('background-color', 'red');

为使用jquery选择器添加的每个元素赋予单独的边框

2 个答案: