Bootstrap Snippet Parent (select by js) using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <div class="ancestors">
          <div style="width:500px;">div (great-grandparent)
            <ul>ul (grandparent)  
              <li>li (direct parent)
                <span>span</span>
              </li>
            </ul>   
          </div>
    </div>
</div>
<div class="ancestors2"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.ancestors * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
.ac { color:red;}
.dc {color:black;}
.ancestors2 * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
.parent-until { color:#000;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//parent
//we can select parent and add class like 3 type that well i know....
//parents
//same like parents we can select any of other parent...
$(document).ready(function(){
    $("ul").parent().css({"color":"green"});
});
$(document).ready(function(){
   $("li").parent().addClass("ac");
});
$(document).ready(function(){
    var span_parent = $("span").parent();
    span_parent.addClass("ac");
});
$(document).ready(function(){
    var try_new = $("span").parent();
    try_new.addClass("dc");
    try_new.before("ffdfdfdd")
});
//parentsUntil
//all parents select jisko chahe use select kiye bina
$(document).ready(function(){
    $("span").parentsUntil("ul").addClass("parent-until");
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Parent (select by js)"
Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"Parent (select by js)" Bootstrap 3.3.0 Snippet by naimansari

Related: See More

Questions / Comments:

"Parent (select by js)"
Bootstrap 3.3.0 Snippet by naimansari