Question

我有以下内容：

<div class="parent">
    <div class="col">MyColumn</div>
</div>

仅当它包含类parent的类时，我才想设置col类的样式

Answer 1

以下是使用jQuery的两个选择：

选项1

$('.parent').has('.col').addClass('style');

.style {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col">MyColumn</div>
</div>

选项2

if ($(".col").parents(".parent").length == 1) {
  // add style here
  $(".parent").css({'background': "red"});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col">MyColumn</div>
</div>

Answer 2

这是我到目前为止提出的。我想做的是在特定大小的col后面的剩余空间中散布带有COL类的div。

它仍然不是完美的，需要进行一些调整，但是朝着正确的方向迈出了一步。

var mediaBase = parseFloat(8.33333);

    $.each($("div.row"), function (index) {
        var gens = 0;
        var total = 0;

        $.each($(this).find("div[class^='col']"), function (ii) {
            if (total > 100) {
                $(this).hide();
            }
            else {
                if ($(this).attr("class").indexOf("-") > 0) {
                    let tmp = $(this).attr("class");
                    tmp = parseInt(tmp.slice(tmp.lastIndexOf("-") + 1));

                    total += parseFloat(mediaBase * tmp);
                }
                else {
                    gens++;
                }
            }
        });

        if (gens > 0 && total < 100) {
            let val = (100 - total) / gens;

            if (total === 0) {
                val = 100 / gens;
            }

            $(this).find("div.col").css("width", val.toString() + "%");
        }
    });

仅当元素包含具有特定类的特定元素时，才设置样式

2 个答案: