Jquery best way to get a parent with a class and then find a div and iterate its divs

Question

I have a button that adds a div after a specific div in a list. In order to do this, I need to find a parent div with a specific class and find its child div with its class, then to iterate through its divs to find one with a specific css attribute...

Here is the html structure:

<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>

So I am writing a script that appends a div bellow/bottom to a div with "border-bottom-style: dashed".

$(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>");
                }
            //}
        });
    });

There are different ways to get parent and child: next,find,closest,parents,children...etc. Which one is the best choice in this case.

Answer 1

Check if this works for you: 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;
}

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/612/

Instead of comparing the style, just use a class(dashed) so that it can be used in filtering the selector and also reducing another comparison

In case, if you need style attributes, you can change the selector as:

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

But you have to be careful in this case, if there is another style then this will fail.