小提琴：http://liveweave.com/ZwZPMA
（简化小提琴在帖子底部作为片段提供。这个是向您展示它的用法）
我正在处理网页设计应用程序并遇到了问题。
现在我知道了几种选择元素的方法：
$(element *)
$(element).children()
然而，这些只是抓住一个元素的直接后裔的方法。
但是我想选择我点击的元素，不管它是它的主要父/容器的后代（例如我的#dynamic-storage）。
因此这种方法不起作用......
$("#dynamic-storage *").children().children().children()
我知道我可以使用$(".selected").children().length >= 0来检查我选择的元素是否有子节点。
if ( $(".selected").children().length <= 0 ) {
console.log("no children");
return false;
} else if ( $(".selected").children().length >= 0 ) {
console.log("yes children");
return false;
}
这是简化的小提琴。
$(document).ready(function() {
// Draggable FunctionBar
$(".functionbar").draggable({
axis: "y",
handle: ".handlesbar"
});
// Select Elements
var SelectElements = function() {
$("#dynamic-storage *").children().children().children().on("mouseup touchend", function() {
if ( $(".selected").is(":visible") ) {
$(".selected").removeClass("selected");
}
$(this).addClass("selected");
});
};
// Clear Selection
var ClearSelection = function() {
$(".selected").removeClass("selected");
};
SelectElements();
});/* Body */
#dynamic-storage {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 0;
}
/* FunctionBar */
.functionbar {
position: absolute;
top: 20px;
left: 25px;
right: 25px;
z-index: 998;
}
.functionbar .handlesbar {
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
padding: 6px 0;
border-radius: 10px 10px 0 0;
font: 24px arial;
text-align: center;
background: hsla(180, 0%, 0%, .75);
word-spacing: 12px;
z-index: 999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.functionbar a {
text-decoration: none;
color: hsl(180, 0%, 90%);
}
.functionbar .active {
color: #9cf;
}
.functionbar .hide {
display: none;
}
/* Dialog Sec */
.functionbar .reveal {
position: relative;
top: 50px;
left: 0;
margin: auto;
width: 100%;
height: 200px;
overflow: auto;
}
.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
font-family: arial;
background: rgba(255, 255, 255, 0.6);
}
.functionbar input[type=text], .functionbar textarea {
border: 1px solid rgba(0, 0, 0, 0.6);
margin-bottom: 10px;
}
.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
font-size: 24px;
color: #000;
}
#dynamic-storage .selected {
outline: 2px dotted #69f;
}
/* Addable Elements */
.functionbar .addcontent {
text-align: center;
}
.functionbar .addcontent .element, .functionbar .editcontent .element {
cursor: pointer;
display: inline-block;
text-align: center;
padding: 2%;
width: 20%;
border: 1px solid rgba(204, 204, 204, 0.67);
color: #262B2F;
}
.functionbar .element:hover {
background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
font-size: 26px;
}
.functionbar .element h4 {
font-weight: 300;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<div id="dynamic-storage">
<div class="grid">
<div class="grid__col--7">
<div class="centered grid__col--8">
<p>
</p>
<h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
<h2 class="headline-secondary--grouped selected">Don't forget about the subtitle</h2>
<p>This is a typical paragraph for the UI Kit. <a href="#">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
<blockquote>You know what really gets me going? A really nice set of block quotes. That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<h4>Offcanvas Menu</h4>
<div class="offcanvas">
<span class="icn--close">
<b class="srt">close</b>
</span>
<ul class="menu" role="navigation">
<a class="menu__link" href="#">Link 1</a>
<a class="menu__link" href="#">Link 2</a>
<a class="menu__link" href="#">Link 3</a>
<a class="menu__link--end" href="#">Link 4</a>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
您实际上是在尝试获取点击的目标。事件对象具有在其属性target属性。
因此，通过将事件作为函数的参数，您可以通过执行$(event.target)来选择单击的元素。请注意，您必须在父元素上绑定事件，在这种情况下：$('#dynamic-storage')。
$(document).ready(function() {
// Draggable FunctionBar
$(".functionbar").draggable({
axis: "y",
handle: ".handlesbar"
});
// Select Elements
var SelectElements = function() {
$("#dynamic-storage").on("mouseup touchend", function(e) { //Pass the event
if ( $(".selected").is(":visible") ) {
$(".selected").removeClass("selected");
}
// Target the element
$(e.target).addClass("selected");
});
};
// Clear Selection
var ClearSelection = function() {
$(".selected").removeClass("selected");
};
SelectElements();
});/* Body */
#dynamic-storage {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 0;
}
/* FunctionBar */
.functionbar {
position: absolute;
top: 20px;
left: 25px;
right: 25px;
z-index: 998;
}
.functionbar .handlesbar {
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
padding: 6px 0;
border-radius: 10px 10px 0 0;
font: 24px arial;
text-align: center;
background: hsla(180, 0%, 0%, .75);
word-spacing: 12px;
z-index: 999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.functionbar a {
text-decoration: none;
color: hsl(180, 0%, 90%);
}
.functionbar .active {
color: #9cf;
}
.functionbar .hide {
display: none;
}
/* Dialog Sec */
.functionbar .reveal {
position: relative;
top: 50px;
left: 0;
margin: auto;
width: 100%;
height: 200px;
overflow: auto;
}
.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
font-family: arial;
background: rgba(255, 255, 255, 0.6);
}
.functionbar input[type=text], .functionbar textarea {
border: 1px solid rgba(0, 0, 0, 0.6);
margin-bottom: 10px;
}
.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
font-size: 24px;
color: #000;
}
#dynamic-storage .selected {
outline: 2px dotted #69f;
}
/* Addable Elements */
.functionbar .addcontent {
text-align: center;
}
.functionbar .addcontent .element, .functionbar .editcontent .element {
cursor: pointer;
display: inline-block;
text-align: center;
padding: 2%;
width: 20%;
border: 1px solid rgba(204, 204, 204, 0.67);
color: #262B2F;
}
.functionbar .element:hover {
background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
font-size: 26px;
}
.functionbar .element h4 {
font-weight: 300;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<div id="dynamic-storage">
<div class="grid">
<div class="grid__col--7">
<div class="centered grid__col--8">
<p>
</p>
<h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
<h2 class="headline-secondary--grouped selected">Don't forget about the subtitle</h2>
<p>This is a typical paragraph for the UI Kit. <a href="#">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
<blockquote>You know what really gets me going? A really nice set of block quotes. That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<h4>Offcanvas Menu</h4>
<div class="offcanvas">
<span class="icn--close">
<b class="srt">close</b>
</span>
<ul class="menu" role="navigation">
<a class="menu__link" href="#">Link 1</a>
<a class="menu__link" href="#">Link 2</a>
<a class="menu__link" href="#">Link 3</a>
<a class="menu__link--end" href="#">Link 4</a>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>