使用jQuery隐藏基于Input的父元素(Using jQuery to hide parent elements based on Input)

使用jQuery隐藏基于Input的父元素(Using jQuery to hide parent elements based on Input)

我试图使用.addClass（）和.removeClass（）从打印中删除项目。 ul.gform_fields包含整个部分和每个区域的标题，li.gfield包含输入区域。

基本思想是将它们全部标记为隐藏在文档加载（@media print）上，然后从包含父容器ul项的任何选定项中删除隐藏值。 最终目标是删除项目，如果删除了一个类别的所有项目，则也删除该类别。

我可以让列表项工作，但我似乎无法让父UL切换可见性。

jQuery(document).ready(function($) { $("#gform_print_button").click( function() { $("ul.gform_fields").each(function () { $(this).addClass("noPrint"); }); $("input.ginput_quantity").each(function () { if (this.value == "") $(this).parent().parent().addClass("noPrint"); else $(this).parent().parent().parent().removeClass("noPrint"); $(this).parent().parent().removeClass("noPrint"); }); //javascript:window.print(); } ); })

这是HTML：

<ul class="gform_fields"> <li> <h4>Cart &amp; Dollies</h4> </li> <li class=""> <span>Daily Rate</span> <span>Quantity</span> </li> <li class=""> <label for="input_1_31_1"> </label> <div class="ginput_container"> <input type="hidden" name="input_31.1" value="Furniture Dolly" /> <span >Price:</span> <span id="input_1_31">$6.00</span> <input type="hidden" name="input_31.2" id="ginput_base_price_1_31" value="$6.00" /> <span>Quantity:</span> <input type="text" name="input_31.3" value="" id="ginput_quantity_1_31" class="ginput_quantity" size="10" tabindex="24" /></div> </li> <li class=""> <label for="input_1_32_1"> </label> <div class="ginput_container"> <input type="hidden" name="input_32.1" value="Gorilla Cart" class="gform_hidden" /> <span>Price:</span> <span id="input_1_32">$10.00</span> <input type="hidden" name="input_32.2" id="ginput_base_price_1_32" value="$10.00" /> <span>Quantity:</span> <input type="text" name="input_32.3" value="" id="ginput_quantity_1_32" class="ginput_quantity" size="10" tabindex="25" /></div> </li> <li class=""> <label class="gfield_label" for="input_1_33_1"> </label> <div class="ginput_container ginput_container_singleproduct"> <input type="hidden" name="input_33.1" value="Magliner / Jr." class="gform_hidden" /> <span>Price:</span> <span id="input_1_33">$15.00</span> <input type="hidden" name="input_33.2" id="ginput_base_price_1_33" value="$15.00" /> <span>Quantity:</span> <input type="text" name="input_33.3" value="" id="ginput_quantity_1_33" class="ginput_quantity" size="10" tabindex="26" /></div> </li> </ul> <ul> <li class=""> <input type="button" id="gform_print_button" class="gform_button button printbtn" value="Print" /> </li> </ul>

http://jsfiddle.net/zy87g0Lz/1/

I am trying to remove the items from printing using .addClass() and .removeClass(). The ul.gform_fields contains the entire section and a title for each area and li.gfield contain the input areas.

The basic idea is to mark them all as hidden on document load (@media print) and then remove the hidden value from any that are selected including the parent container ul item. The end goal is to have items removed and if all the items of one category are removed then remove the category as well.

I can get the list items to work but I can't seem to get the parent UL to toggle visibility.

jQuery(document).ready(function($) { $("#gform_print_button").click( function() { $("ul.gform_fields").each(function () { $(this).addClass("noPrint"); }); $("input.ginput_quantity").each(function () { if (this.value == "") $(this).parent().parent().addClass("noPrint"); else $(this).parent().parent().parent().removeClass("noPrint"); $(this).parent().parent().removeClass("noPrint"); }); //javascript:window.print(); } ); })

Here is the HTML:

<ul class="gform_fields"> <li> <h4>Cart &amp; Dollies</h4> </li> <li class=""> <span>Daily Rate</span> <span>Quantity</span> </li> <li class=""> <label for="input_1_31_1"> </label> <div class="ginput_container"> <input type="hidden" name="input_31.1" value="Furniture Dolly" /> <span >Price:</span> <span id="input_1_31">$6.00</span> <input type="hidden" name="input_31.2" id="ginput_base_price_1_31" value="$6.00" /> <span>Quantity:</span> <input type="text" name="input_31.3" value="" id="ginput_quantity_1_31" class="ginput_quantity" size="10" tabindex="24" /></div> </li> <li class=""> <label for="input_1_32_1"> </label> <div class="ginput_container"> <input type="hidden" name="input_32.1" value="Gorilla Cart" class="gform_hidden" /> <span>Price:</span> <span id="input_1_32">$10.00</span> <input type="hidden" name="input_32.2" id="ginput_base_price_1_32" value="$10.00" /> <span>Quantity:</span> <input type="text" name="input_32.3" value="" id="ginput_quantity_1_32" class="ginput_quantity" size="10" tabindex="25" /></div> </li> <li class=""> <label class="gfield_label" for="input_1_33_1"> </label> <div class="ginput_container ginput_container_singleproduct"> <input type="hidden" name="input_33.1" value="Magliner / Jr." class="gform_hidden" /> <span>Price:</span> <span id="input_1_33">$15.00</span> <input type="hidden" name="input_33.2" id="ginput_base_price_1_33" value="$15.00" /> <span>Quantity:</span> <input type="text" name="input_33.3" value="" id="ginput_quantity_1_33" class="ginput_quantity" size="10" tabindex="26" /></div> </li> </ul> <ul> <li class=""> <input type="button" id="gform_print_button" class="gform_button button printbtn" value="Print" /> </li> </ul>

http://jsfiddle.net/zy87g0Lz/1/

最满意答案

如果我理解正确你就是这样的事情？ http://jsfiddle.net/mickatron/zy87g0Lz/6/

尽量避免DOM遍历，实际上尝试假装那些父，兄弟等方法甚至不存在。 在大多数情况下，您的代码将更具可读性，模块化并且速度更快。

我在答案评论中包含了一些其他提示。

jQuery(document).ready(function($) { // cache selectors that you reuse var $gFormFields = $("ul.gform_fields"); // hide the whole ul on doc load $gFormFields.addClass("noPrint"); var clickHandler = function(){ $gFormFields.addClass("noPrint"); // loop all the li's in the gFormFields // superior to looping the input as you don't have to use DOM traversal $("li", $gFormFields).each(function () { var $this = $(this); var $inputValue = $("input.ginput_quantity", $this).val(); if ($inputValue){ $gFormFields.removeClass("noPrint"); $this.removeClass("noPrint"); }else { $this.addClass("noPrint"); } }); }; // Use .on() and .off() for all events. In later version of jQ even delegates have been moved to .on(); // assigning the handler to a function expression allows you to remove that specific handler with .off(). $("#gform_print_button").on('click', clickHandler); });

If I understand correctly you're after something like this? http://jsfiddle.net/mickatron/zy87g0Lz/6/

Try to avoid DOM traversal, actually try to pretend those parent, sibling etc methods don't even exist. Your code will be more readable, modular and slightly faster in most all cases.

I've included some other tips in the answers comments.

jQuery(document).ready(function($) { // cache selectors that you reuse var $gFormFields = $("ul.gform_fields"); // hide the whole ul on doc load $gFormFields.addClass("noPrint"); var clickHandler = function(){ $gFormFields.addClass("noPrint"); // loop all the li's in the gFormFields // superior to looping the input as you don't have to use DOM traversal $("li", $gFormFields).each(function () { var $this = $(this); var $inputValue = $("input.ginput_quantity", $this).val(); if ($inputValue){ $gFormFields.removeClass("noPrint"); $this.removeClass("noPrint"); }else { $this.addClass("noPrint"); } }); }; // Use .on() and .off() for all events. In later version of jQ even delegates have been moved to .on(); // assigning the handler to a function expression allows you to remove that specific handler with .off(). $("#gform_print_button").on('click', clickHandler); });