Question

我有以下的Html结构

现有

    <fieldset>
        ....
        <div>
           <div class="responsive"></div>
        </div>
        ...
        <fieldset>
            ....
            <div class="responsive"></div>
        </fieldset>
        ...
        <div class="responsive"></div>
        <fieldset>
        <div>
           <div class="responsive"></div>
        </div>
        </fieldset>
    </fieldset>
    <div class="responsive"></div>
    <fieldset>
        .....
        <div class="responsive"></div>
        <div class="responsive"></div>
        <fieldset>
            ........
            <div class="responsive"></div>
            <fieldset>
                    ........
                <div class="responsive"></div>
            </fieldset>
        </fieldset>
    </fieldset>
    <div class="responsive"></div>

修改
  1）。响应可能有任何不。父母直到fieldset

2）在.reponsive和fieldset之间，他们可能在下面和之后有任何兄弟姐妹

我需要编写JQuery选择器以在字段集中查找.responsive但仅限于第1级，以便我应该修复宽度。即

fieldset -> .responsive (correct) (result may contain 1 or more)
fieldset -> .responsive -> fieldset -> .responsive (wrong)
.responsive (wrong)

但是通过这个选择器，我应该只能在fieldset中选择所有.responsive div，并保持宽度。

预期产出

    <fieldset>
        ....
        <div>
           <div class="responsive" style="width:xpx;"></div>
        </div>
        ...
        <fieldset>
            ....
            <div class="responsive" style="width:yzpx;"></div>
        </fieldset>
        ...
        <div class="responsive"></div>
        <fieldset>
        <div>
           <div class="responsive" style="width:xypx;"></div>
        </div>
        </fieldset>
    </fieldset>
    <div class="responsive"></div>
    <fieldset>
        .....
        <div class="responsive" style="width:xzpx;"></div>
        <div class="responsive" style="width:zpx;"></div>
        <fieldset>
            ........
            <div class="responsive" style="width:xzpx;"></div>
            <fieldset>
                    ........
                <div class="responsive" style="width:yzpx;"></div>
            </fieldset>
        </fieldset>
    </fieldset>
    <div class="responsive"></div>

Answer 1

请检查：

$(document).ready(function() {
  $("fieldset > .responsive").css("background", "gray").text("width:xyzpx;");
});

.responsive {
  width: 100px;
  height: 40px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<fieldset>
  1<div class="responsive"></div>
  <fieldset>
    2<div class="responsive"></div>
  </fieldset>
  3<div class="responsive"></div>
  <fieldset>
    4<div class="responsive"></div>
  </fieldset>
</fieldset>
5<div class="responsive"></div>
<fieldset>
  6<div class="responsive"></div>
  7<div class="responsive"></div>
  <fieldset>
    8<div class="responsive"></div>
    <fieldset>
      9<div class="responsive"></div>
    </fieldset>
  </fieldset>
</fieldset>
10<div class="responsive"></div>

Answer 2

这将选择A = @x OR (@x = 'someString' AND A IN ('1', '2', '3'))下的所有.responsive元素，但同时不在任何第二级<fieldset>下。

1）使用CSS选择器如此

<fieldset>

在我的帖子中我提到了$("fieldset :not(fieldset) .responsive").css("width", "xyzpx"); 作为示例。

＆＃13;

background-color

＆＃13;

$("fieldset :not(fieldset) .responsive").css("background-color", "blue");

＆＃13;

JQuery Selector用于在同一元素中重复出现元素

2 个答案: