Holen Sie sich die ID des Containers durch Klicken auf

-1

Ich möchte die id der enthaltenen div, wenn ich auf eine der .row-settings Werkzeug klicken.Holen Sie sich die ID des Containers durch Klicken auf

Alle Lösungen, die ich versucht habe nur mir geben undefined

<div id="content" class="container"> 
    <div class="ui-draggable"> 
     <div id="100" class="row clearfix template-block"> 
      <div class="column full" contenteditable="true"> 
       <div class="center"> 
        <i class="icon ion-leaf size-48"></i> 
        <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
        <div class="display"> 
         <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 1</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
      <div class="row-settings"> 
       Get Id 
      </div> 
     </div> 
    </div> 
    <div class="ui-draggable"> 
     <div id="200" class="row clearfix template-block"> 
      <div class="column full" contenteditable="true"> 
       <div class="center"> 
        <i class="icon ion-leaf size-48"></i> 
        <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
        <div class="display"> 
         <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 2</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
      <div class="row-settings"> 
       Get Id 
      </div> 
     </div> 
    </div> 
    <div class="ui-draggable"> 
     <div id="300" class="row clearfix template-block"> 
      <div class="column half" contenteditable="true"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p> 
      </div> 
      <div class="column half" contenteditable="true"> 
       <img src="https://placehold.it/300x150" alt=""> 
      </div> 
     </div> 
     <div class="row-tool" style="right: auto; left: -37px;"> 
      <div class="row-settings"> 
       Get Id 
      </div> 
     </div> 
    </div> 
</div>

$('.row-settings').on('click',function(){ 
    id = $(this).parents('.template-block').attr('id') 
    console.log(id) 
});

Ich habe eine Geige gemacht (was nicht richtig funktioniert), so dass Sie den Spielplatz.

https://jsfiddle.net/5qfxzaph/

Jede Hilfe wird geschätzt.

Dank

Quelle

2017-02-26 Franco

'.template-block' ist kein Elternteil von' .row-settings'. Es ist ein Geschwister. – Andreas

Hoi @Andreas Ich verstehe deine Abstimmung nicht. Was Sie in der Geige sehen, ist nur einer der vielen Versuche, die ich gemacht habe, um diese Arbeit zu bekommen. Ich habe auch Geschwister versucht, aber ohne Erfolg. Es wird sehr nützlich für mich sein, wenn Sie mich in die richtige Richtung zeigen werden – Franco

Das ist nicht meine down-vote – Andreas

Die .template-block div ist nicht ein Elternteil .row-settings div. Es ist ein Geschwister

$(this).parents('.ui-draggable').find('.template-block')

Quelle

2017-02-26 15:00:32

Sie müssen die vorherigen Geschwister der Eltern div:

$('.row-settings').on('click', function() { 
 
    id = $(this).parent().prev().attr('id') 
 
    console.log(id) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content" class="container"> 
 
    <div class="ui-draggable"> 
 
    <div id="100" class="row clearfix template-block"> 
 
     <div class="column full" contenteditable="true"> 
 
     <div class="center"> 
 
      <i class="icon ion-leaf size-48"></i> 
 
      <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
      <div class="display"> 
 
      <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 1</h1> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
     <div class="row-settings"> 
 
     Get Id 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="ui-draggable"> 
 
    <div id="200" class="row clearfix template-block"> 
 
     <div class="column full" contenteditable="true"> 
 
     <div class="center"> 
 
      <i class="icon ion-leaf size-48"></i> 
 
      <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
      <div class="display"> 
 
      <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 2</h1> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
     <div class="row-settings"> 
 
     Get Id 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="ui-draggable"> 
 
    <div id="300" class="row clearfix template-block"> 
 
     <div class="column half" contenteditable="true"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p> 
 
     </div> 
 
     <div class="column half" contenteditable="true"> 
 
     <img src="https://placehold.it/300x150" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="row-tool" style="right: auto; left: -37px;"> 
 
     <div class="row-settings"> 
 
     Get Id 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-02-26 15:01:12 mplungjan

Sie sind nicht auf die richtig Eltern zeigen. Dies sollte funktionieren:

$('.row-settings').on('click',function(){ 
 
    id = $(this).parent().parent().find('.template-block').attr("id"); 
 
    console.log(id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content" class="container"> 
 
\t <div class="ui-draggable"> 
 
\t \t <div id="100" class="row clearfix template-block"> 
 
\t \t \t <div class="column full" contenteditable="true"> 
 
\t \t \t \t <div class="center"> 
 
\t \t \t \t \t <i class="icon ion-leaf size-48"></i> 
 
\t \t \t \t \t <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
\t \t \t \t \t <div class="display"> 
 
\t \t \t \t \t \t <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 1</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
\t \t \t <div class="row-settings"> 
 
\t \t \t \t Get Id 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="ui-draggable"> 
 
\t \t <div id="200" class="row clearfix template-block"> 
 
\t \t \t <div class="column full" contenteditable="true"> 
 
\t \t \t \t <div class="center"> 
 
\t \t \t \t \t <i class="icon ion-leaf size-48"></i> 
 
\t \t \t \t \t <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
\t \t \t \t \t <div class="display"> 
 
\t \t \t \t \t \t <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 2</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
\t \t \t <div class="row-settings"> 
 
\t \t \t \t Get Id 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="ui-draggable"> 
 
\t \t <div id="300" class="row clearfix template-block"> 
 
\t \t \t <div class="column half" contenteditable="true"> 
 
\t \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="column half" contenteditable="true"> 
 
\t \t \t \t <img src="https://placehold.it/300x150" alt=""> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row-tool" style="right: auto; left: -37px;"> 
 
\t \t \t <div class="row-settings"> 
 
\t \t \t \t Get Id 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Quelle

2017-02-26 15:02:40 vpedrosa

Sie müssen durchlaufen bis zu ui-ziehbar. Um dies zu erreichen, können Sie closest verwenden und dann können Sie das gewünschte Element finden:

$('.row-settings').on('click',function(){ 
 
    id = $(this).closest('.ui-draggable').find('.template-block').attr('id') 
 
    console.log(id) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="content" class="container"> 
 
    <div class="ui-draggable"> 
 
     <div id="100" class="row clearfix template-block"> 
 
      <div class="column full" contenteditable="true"> 
 
       <div class="center"> 
 
        <i class="icon ion-leaf size-48"></i> 
 
        <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
        <div class="display"> 
 
         <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 1</h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
      <div class="row-settings"> 
 
       Get Id 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="ui-draggable"> 
 
     <div id="200" class="row clearfix template-block"> 
 
      <div class="column full" contenteditable="true"> 
 
       <div class="center"> 
 
        <i class="icon ion-leaf size-48"></i> 
 
        <h1 style="font-size: 1.3em">BEAUTIFUL CONTENT</h1> 
 
        <div class="display"> 
 
         <h1>LOREM IPSUM IS SIMPLY DUMMY TEXT 2</h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row-tool" style="right: auto; left: -37px; display: block;"> 
 
      <div class="row-settings"> 
 
       Get Id 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="ui-draggable"> 
 
     <div id="300" class="row clearfix template-block"> 
 
      <div class="column half" contenteditable="true"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p> 
 
      </div> 
 
      <div class="column half" contenteditable="true"> 
 
       <img src="https://placehold.it/300x150" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="row-tool" style="right: auto; left: -37px;"> 
 
      <div class="row-settings"> 
 
       Get Id 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2017-02-26 15:03:00 gaetanoM

Danke, mich auf diese +1 zu zeigen – Franco

.template-block ist kein Elternteil, so dass man seine Mutterelement erste, erhalten müssen und dann finden Sie die template-block, um die ID zu erhalten.

id = $(this).parents('.ui-draggable').find('.template-block:first').attr('id');

Quelle

2017-02-26 15:04:59 nickrigby

Holen Sie sich die ID des Containers durch Klicken auf

Antwort

Verwandte Themen