点击获取容器ID

时间：2017-02-26 14:55:42

标签： javascript jquery

如果点击其中一个id工具，我想获得包含div的.row-settings。

我尝试过的所有解决方案都只给了我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)
});

我做了一个小提琴（工作不正常）所以你将有操场。

https://jsfiddle.net/5qfxzaph/

任何帮助将不胜感激。

由于

5 个答案:

答案 0 :(得分：1)

您需要遍历 ui-draggable 。为了实现这一目标，您可以使用closest，然后您可以找到所需的元素：

＆＃13;
＆＃13; 
$('.row-settings').on('click',function(){
  id = $(this).closest('.ui-draggable').find('.template-block').attr('id')
  console.log(id)
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

Interop.Microsoft.Office.Interop.Excel div不是.template-block div的父级。这是一个兄弟姐妹

.row-settings

答案 2 :(得分：0)

你需要父div的前一个兄弟：

＆＃13;
＆＃13; 
$('.row-settings').on('click', function() {
  id = $(this).parent().prev().attr('id')
  console.log(id)
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您没有指向正确的父级。这应该有效：

$('.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">
	<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>

答案 4 :(得分：0)

.template-block不是父级，因此您需要首先获取其父元素 ，然后找到template-block以获取ID。

id = $(this).parents('.ui-draggable').find('.template-block:first').attr('id');
相关问题
最新问题