blocks|key|350296|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350297|$("button").click(function+()+{
++++$(this).parents("div:first").html(...);
});|code-block|syntax|javascript|350298|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>$("button").click(function () {
    $(this).parents("div:first").html(...);
});
</code></pre>


blocks|key|3128559|text|1.|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3128560|$(this).parent().attr("id");|code-block|syntax|javascript|3128561|2.|3128562|肯定有很多种方法！一种可能是隐藏包含答案的元素，例如|3128563|<div>
++++Volume+=+<input+type="text"+/>
++++<button+type="button">Check+answer</button>
++++<span+style="display:+hidden">3.93e-6&lt;/span>
++++<div></div>
</div>|3128564|然后使用类似于上面的jQuery代码来获取它：|3128565|$("button").click(function+()+
{
++++var+correct+=+Number($(this).parent().children("span").text());
++++validate+($(this).siblings("input").val(),correct);
++++$(this).siblings("div").html(feedback);
});|3128566|请记住，如果你把答案放在客户端代码中，他们就会看到它:)最好的方法是在服务器端验证它，但对于范围有限的应用程序来说，这可能不是问题。|3128567|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>1.</p>

<pre><code>$(this).parent().attr("id");
</code></pre>

<p>2.</p>

<p>There must be a large number of ways! One could be to hide an element that contains the answer, e.g.</p>

<pre><code>&lt;div&gt;
    Volume = &lt;input type="text" /&gt;
    &lt;button type="button"&gt;Check answer&lt;/button&gt;
    &lt;span style="display: hidden"&gt;3.93e-6&amp;lt;/span&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And then have similar jQuery code to the above to grab that:</p>

<pre><code>$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});
</code></pre>

<p>bear in mind that if you put the answer in client code then they can see it :) The best way to do this is to validate it server-side, but for an app with limited scope this may not be a problem.</p>


blocks|key|352984|text|JQUery有一个在DOM树中向上移动的.parents()方法，您可以从那里开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|352985|如果你有兴趣以一种更具语义的方式来做这件事，我不认为在按钮上使用REL属性是在你的代码中语义上定义“这就是答案”的最好方式。我会推荐一些类似的东西：|352986|<p+id="question1">
++++<label+for="input1">Volume+=</label>+
++++<input+type="text"+name="userInput1"+id="userInput1"+/>
++++<button+type="button">Check+answer</button>
++++<input+type="hidden"+id="answer1"+name="answer1"+value="3.93e-6"+/>
</p>|code-block|syntax|javascript|352987|和|352988|$("button").click(function+()+{
++++var+correctAnswer+=+$(this).parent().siblings("input[type=hidden]").val();
++++var+userAnswer+=+$(this).parent().siblings("input[type=text]").val();
++++validate(userAnswer,+correctAnswer);
++++$("#messages").html(feedback);
});|352989|不太确定你的验证和反馈是如何工作的，但你已经明白了。|352990|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>JQUery has a .parents() method for moving up the DOM tree you can start there.  </p>

<p>If you're interested in doing this a more semantic way I don't think using the REL attribute on a button is the best way to semantically define "this is the answer" in your code.  I'd recommend something along these lines:</p>

<pre><code>&lt;p id="question1"&gt;
    &lt;label for="input1"&gt;Volume =&lt;/label&gt; 
    &lt;input type="text" name="userInput1" id="userInput1" /&gt;
    &lt;button type="button"&gt;Check answer&lt;/button&gt;
    &lt;input type="hidden" id="answer1" name="answer1" value="3.93e-6" /&gt;
&lt;/p&gt;
</code></pre>

<p>and</p>

<pre><code>$("button").click(function () {
    var correctAnswer = $(this).parent().siblings("input[type=hidden]").val();
    var userAnswer = $(this).parent().siblings("input[type=text]").val();
    validate(userAnswer, correctAnswer);
    $("#messages").html(feedback);
});
</code></pre>

<p>Not quite sure how your validate and feedback are working, but you get the idea.</p>


blocks|key|3341387|text|您可以在父div上使用event+delegation。或者使用closest方法查找按钮的父级。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3341388|两者中最简单的可能是最接近的。|3341389|var+id+=+$("button").closest("div").prop("id");|code-block|syntax|javascript|3341390|entityMap|0|LINK|mutability|MUTABLE|url|http://learn.jquery.com/events/event-delegation/|1|http://docs.jquery.com/Traversing/closest^0|B|G|0|W|7|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You could use <a href="http://learn.jquery.com/events/event-delegation/" rel="noreferrer">event delegation</a> on the parent div. Or use the <a href="http://docs.jquery.com/Traversing/closest" rel="noreferrer">closest</a> method to find the parent of the button.</p>

<p>The easiest of the two is probably the closest.</p>

<pre><code>var id = $("button").closest("div").prop("id");
</code></pre>


blocks|key|349319|text|这可以通过执行以下操作来轻松完成：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|349320|$(this).closest('table').attr('id');|code-block|syntax|javascript|349321|将它附加到表中的任何对象上，它将返回该表的id。|349322|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This can be easily done by doing:</p>

<pre><code>$(this).closest('table').attr('id');
</code></pre>

<p>You attach this to any object inside a table and it will return you the id of that table.</p>


blocks|key|3341474|text|http://jsfiddle.net/qVGwh/6/检查这个|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3341475|+++$("#MadonwebTest").click(function+()+{
++++var+id+=+$("#MadonwebTest").closest("div").attr("id");
++++alert(id);
++++});|code-block|syntax|javascript|3341476|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/qVGwh/6/^0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="http://jsfiddle.net/qVGwh/6/" rel="noreferrer">http://jsfiddle.net/qVGwh/6/</a>
Check this</p>

<pre><code>   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });
</code></pre>


blocks|key|353040|text|$(this).parents('div').attr('id');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|353041|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(this).parents('div').attr('id');
</code></pre>


blocks|key|353043|text|find()和closest()看起来比：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|353044|$(this).parent().attr("id");|code-block|syntax|javascript|353045|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>find() and closest() seems slightly slower than:</p>

<pre><code>$(this).parent().attr("id");
</code></pre>


<p>I have some html like this:</p>

<pre><code>&lt;div id="1"&gt;
    &lt;p&gt;
        Volume = &lt;input type="text" /&gt;
        &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt;
    &lt;/p&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and some JS like this:</p>

<pre><code>$("button").click(function () {
    var buttonNo = $(this).attr('class');
    var correct = Number($(this).attr('rel'));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});
</code></pre>

<p>What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.</p>

<ol>
<li><p>How do I find the id of the div parenting the button.</p></li>
<li><p>What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!</p></li>
</ol>


Finding the id of a parent div using Jquery

服务器

jQuery

我有一些像这样的html：<div id="1">    <p>        Volume = <input type="text" />        <button rel="3.93e-6" class="1" type="button">Check answer</button>    </p>    <di...

问使用Jquery查找父div的id
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery查找父div的idEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery查找父div的id
EN