代码之家 › 专栏 › 技术社区 › CodeGust

Jquery获取类的父级,然后查找div并迭代其div的最佳方法

parents children find html jquery

CodeGust · 技术社区 · 9 年前

我有一个按钮,它在列表中的特定div之后添加一个div。为了做到这一点,我需要找到一个带有特定类的父div,并找到它的带有类的子div,然后遍历它的div,找到一个具有特定css属性的div。。。

以下是html结构:

<div class="popup1">
 <div class="rootdiv">
  <div class="r1">content</div>
  <div class="r2">
    <div class="raw">raw-content...</div>
    <div class="raw" style="border-bottom-style: dashed;">raw-content...</div>
    <!-- need to append here (bellow that div with a dashed border -->
    <div class="raw">raw-content...</div>
  </div>
  <div class="r3">
    <input type="button" class="btn" onclick="forExMyJqueryFunc()"></input>
  </div>
 </div>
</div>
<div class="popup2">
 <div class="rootdiv">
  <div class="r1">content</div>
  <div class="r2">
    <div class="raw">raw-content...</div>
    <div class="raw" style="border-bottom-style: dashed;">raw-content...</div>
    <div class="raw">raw-content...</div>
  </div>
  <div class="r3">
    <inpute type="button" class="btn" onclick="forExMyJqueryFunc()"></input>
  </div>
 </div>
</div>

因此,我正在编写一个脚本,将一个div below/bottom附加到一个带有“border-bottom-style:虚线”的div。

$(function forExMyJqueryFunc() {
        $(".btn").on('click', function() {

            var divRaws = $(this).closest(".rootdiv").siblings(".r2 .raw");
            //divRaws.foreach(item) { 
                if (item.css('border-bottom-style') === "dashed") {
                   item.after("<div class="raw">raw-new-content...</div>");
                }
            //}
        });
    });

获得父母和孩子的方式有很多种:下一种,找到,最亲近的,父母,孩子。。。在这种情况下,哪一个是最好的选择。

2 回复 | 直到 9 年前

K K 9 年前

检查这是否适用于您: JS文件:

$(function () {
    $(".btn").on('click', function () {
        var div = $(this).parents(".rootdiv:first").find(".r2 .raw.dashed:first");
        div.after("<div class='raw'>raw-new-content...</div>");
    });
});

HTML格式:

<div class="popup1">
    <div class="rootdiv">
        <div class="r1">content</div>
        <div class="r2">
            <div class="raw">raw-content...</div>
            <div class="raw dashed">raw-content...</div>
            <!-- need to append here (bellow that div with a dashed border -->
            <div class="raw">raw-content...</div>
        </div>
        <div class="r3">
            <input type="button" class="btn"></input>
        </div>
    </div>
</div>
<div class="popup2">
    <div class="rootdiv">
        <div class="r1">content</div>
        <div class="r2">
            <div class="raw">raw-content...</div>
            <div class="raw dashed">raw-content...</div>
            <div class="raw">raw-content...</div>
        </div>
        <div class="r3">
            <inpute type="button" class="btn" onclick="forExMyJqueryFunc()">
                </input>
        </div>
    </div>
</div>

CSS:

.dashed {
    border:2px dashed black;
}

演示: http://jsfiddle.net/lotusgodkk/GCu2D/612/

不要比较样式,只需使用一个类(虚线),以便它可以用于筛选选择器并减少另一个比较

在这种情况下,如果需要样式属性,可以将选择器更改为:

 var div = $(this).parents(".rootdiv:first").find(".r2 .raw[style='border-bottom-style: dashed;']:first");

但在这种情况下,你必须小心,如果有另一种风格,那么这将失败。

Grzegorz Pawlik 9 年前

我认为使用更灵活 .find() 比 .siblings() -在您的情况下:

$(this).closest(".rootdiv").find(".r2 .raw");