blocks|key|1322733|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322734|$('li.current_sub').prevAll("li.par_cat:first");|code-block|syntax|javascript|1322735|使用您的标记进行了测试：|1322736|​|1322737|$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");|1322738|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
++<li+class="par_cat"></li>
++<li+class="sub_cat"></li>
++<li+class="sub_cat"></li>
++<li+class="par_cat">//+this+is+the+single+element+I+need+to+select</li>
++<li+class="sub_cat"></li>
++<li+class="sub_cat"></li>
++<li+class="sub_cat+current_sub">//+this+is+where+I+need+to+start+searching</li>
++<li+class="par_cat"></li>
++<li+class="sub_cat"></li>
++<li+class="par_cat"></li>
</ul>|1322739|1322740|将用"woohoo“填充最近的前一个li.par_cat。|offset|length|style|CODE|1322741|entityMap^0|0|0|0|0|0|0|0|I|A|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|14|8|@$R|15|S|16|T|U]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>Try:</p>
<pre><code>$('li.current_sub').prevAll(&quot;li.par_cat:first&quot;);
</code></pre>
<p>Tested it with your markup:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class="par_cat"&gt;&lt;/li&gt;
  &lt;li class="sub_cat"&gt;&lt;/li&gt;
  &lt;li class="sub_cat"&gt;&lt;/li&gt;
  &lt;li class="par_cat"&gt;// this is the single element I need to select&lt;/li&gt;
  &lt;li class="sub_cat"&gt;&lt;/li&gt;
  &lt;li class="sub_cat"&gt;&lt;/li&gt;
  &lt;li class="sub_cat current_sub"&gt;// this is where I need to start searching&lt;/li&gt;
  &lt;li class="par_cat"&gt;&lt;/li&gt;
  &lt;li class="sub_cat"&gt;&lt;/li&gt;
  &lt;li class="par_cat"&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>
<p>will fill up the closest previous <code>li.par_cat</code> with &quot;woohoo&quot;.</p>


blocks|key|1322753|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322754|$('li.current_sub').prev('.par_cat').[do+stuff];|code-block|syntax|javascript|1322755|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</p>
<pre><code>$('li.current_sub').prev('.par_cat').[do stuff];
</code></pre>


blocks|key|1322862|text|使用prevUntil()将允许我们获得一个远方的兄弟，而不必获得所有。我有一个特别长的集合，使用prevAll()会占用太多的CPU。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322863|var+category+=+$('li.current_sub').prev('li.par_cat');
if+(category.length+==+0){
++category+=+$('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();|code-block|syntax|javascript|1322864|如果匹配，它将获取前面的第一个同级元素，否则将获取匹配的同级元素之前的同级元素，因此我们只需使用prev()再备份一次，以获得所需的元素。|1322865|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>Using prevUntil() will allow us to get a distant sibling without having to get all. I had a particularly long set that was too CPU intensive using prevAll().</p>

<pre><code>var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();
</code></pre>

<p>This gets the first preceding sibling if it matches, otherwise it gets the sibling preceding the one that matches, so we just back up one more with prev() to get the desired element.</p>


blocks|key|1107782|text|我认为所有的答案都缺少一些东西。我更喜欢使用这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1107783|$('li.current_sub').prevUntil("li.par_cat").prev();|code-block|syntax|javascript|1107784|不需要在选择器中添加:first，更容易阅读和理解。与使用prevAll()相比，prevUntil()方法具有更好的性能|1107785|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>I think all the answers are lacking something. I prefer using something like this</p>

<pre><code>$('li.current_sub').prevUntil("li.par_cat").prev();
</code></pre>

<p>Saves you not adding :first inside the selector and is easier to read and understand.
prevUntil() method has a better performance as well rather than using prevAll()</p>


blocks|key|1322934|text|您可以遵循以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322935|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
++++$(document).ready(function+()+{
++++++++$(".add").on("click",+function+()+{
++++++++++++var+v+=+$(this).closest(".division").find("input[name='roll']").val();
++++++++++++alert(v);
++++++++});
++++});
</script>
<?php

for+($i+=+1;+$i+<=+5;+$i%2B%2B)+{
++++echo'<div+class+=+"division">'
++++++++.+'<form+method="POST"+action="">'
++++++++.+'<p><input+type="number"+name="roll"+placeholder="Enter+Roll"></p>'
++++++++.+'<p><input+type="button"+class="add"+name+=+"submit"+value+=+"Click"></p>'
++++++++.+'</form></div>';
}
?>|code-block|syntax|javascript|1322936|你可以从这里得到一些想法。|1322937|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>You can follow this code:</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
&lt;/script&gt;
&lt;?php

for ($i = 1; $i &lt;= 5; $i++) {
    echo'&lt;div class = "division"&gt;'
        . '&lt;form method="POST" action=""&gt;'
        . '&lt;p&gt;&lt;input type="number" name="roll" placeholder="Enter Roll"&gt;&lt;/p&gt;'
        . '&lt;p&gt;&lt;input type="button" class="add" name = "submit" value = "Click"&gt;&lt;/p&gt;'
        . '&lt;/form&gt;&lt;/div&gt;';
}
?&gt;
</code></pre>

<p>You can get idea from this. </p>


<p>Here's the rough HTML I get to work with:</p>
<pre><code>&lt;li class=&quot;par_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;sub_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;sub_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;par_cat&quot;&gt;&lt;/li&gt; // this is the single element I need to select
&lt;li class=&quot;sub_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;sub_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;sub_cat current_sub&quot;&gt;&lt;/li&gt; // this is where I need to start searching
&lt;li class=&quot;par_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;sub_cat&quot;&gt;&lt;/li&gt;
&lt;li class=&quot;par_cat&quot;&gt;&lt;/li&gt;
</code></pre>
<p>I need to traverse from the <code>.current_sub</code>, find the closest previous <code>.par_cat</code> and do stuff to it.</p>
<p><code>.find(&quot;li.par_cat&quot;)</code> returns the whole load of <code>.par_cat</code> (I've got about 30 on the page). I need target the single one.</p>


jQuery find closest previous sibling with class

下面是我要使用的粗略HTML：<li class="par_cat"></li><li class="sub_cat"></li><li class="sub_cat"></li><li class="par_cat"></li> // this is the single element I need to sele...

问jQuery查找与类最接近的上一个同级
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery查找与类最接近的上一个同级EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery查找与类最接近的上一个同级
EN