Question

我希望在.item div的偶数元素上设置margin-right：0。但是，在某些地方插入了标头，这意味着标头之后的第一个.item元素需要重置替换。这都是动态的，因此我不能在这些部分中添加包装div。

我需要的例子

1. Define the schema of json file 

json.schema=StructType([
StructField("col1",StringType(),True),
StructField("col2",StringType(),True),
StructField("col3",TimestampType(),True),
StructField("col4",
StructType([
StructField("col5",StringType(),True),
StructField("col6",

2. Print the json output

print(sampletmp.json()) 

3. Copy paste the above output to file sample.schema

4. In the code, recreate the schema as below

schema_file = 'path/sample.schema'
schema_json = spark.read.text(schema_file).first()[0]
schema = StructType.fromJson(json.loads(schema_json))

5. Create a DF using above schema

spark.read.schema(schema).json('/path/test.json')

6. Insert the data from DF into Hive table
jsonDF.write.mode("append").insertInto("hivetable")

我尝试过但未考虑标题的内容：

CSS

<h2>heading</h2>
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->

JS：

.item:nth-child(2n) {
     margin-right:0;
}

Answer 1

由于它被标记为[jquery]，因此您可以使用.nextUntil查找每个.items之间的所有h2，然后将其过滤为奇/偶。

在这种情况下，您需要使用:odd，因为它们是从零开始的（因此第1行是偶数的第0行，第2行是奇数的第1行，等等）

$("h2").each(function() {
    // have to use :odd for "even" rows as zero-based
    $(this).nextUntil("h2").filter(":odd").addClass("even");
});

.wrapper { border: 1px solid #CCC; }
.item { height: 10px; margin-right:20px; border: 1px solid green; }
.item.even { margin-right: 0; background-color: lightgreen; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
<h2>heading</h2>
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
</div>

Answer 2

.item:nth-child(odd) {
   margin-right:0 !important;
 }

检查此小提琴：https://jsfiddle.net/5rbyj2ed/6/

Answer 3

在even函数中仅使用odd和nth-child关键字：

div.item:nth-child(even) {
     margin-right:0;
}

您可以查看更多详细信息：https://www.w3.org/Style/Examples/007/evenodd.en.html

向带有插入的标题元素的偶数元素添加边距0

3 个答案: