Jquery 获取具有类的父级然后找到一个 div 并迭代其 div 的最佳方法

Question

我有一个按钮，可以在列表中的特定 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 波纹管/底部附加到带有“border-bottom-style: dashed”的 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>");
                }
            //}
        });
    });

有不同的方法来获取父母和孩子：下一个，查找，最近的，父母，孩子...等。在这种情况下，哪一个是最佳选择。

Answer 1

检查这是否适合您： 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");

但在这种情况下你必须小心，如果有其他样式，那么这将失败。

Answer 2

我认为使用.find() 比使用.siblings() 更灵活——在你的情况下：

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