可以't选择并隐藏任何以前的元素

Can't select and hide any previous element

本文关键字：任何 元素 隐藏 选择 可以      更新时间：2023-09-26

我对这个问题快要失去理智了。任何形式的jQuery选择器似乎都无法动态查找链接上方的任何元素。我正在尝试访问链接上方的元素并将其隐藏。使用parent()、prev()、before()、closest()等。将显示一个非null对象，但它不会响应hide()方法。

<div class="row">
    <div class="col-xs-5">
        <div id="test_fields">
            <li id="test_input" class="string input optional stringish">
                 <label class="label" for="test_input">Ingredient name</label>
                 <input type="text" name="test_input" value="afsfasf" id="test_input">
             </li>
       </div>
       <input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
     <a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields(this)">Remove Ingredient</a>
        </div>
   </div>
function remove_fields(link) 
{
   $(link).prev("input[type=hidden]").val('1'); // this doesn't work
    var divToHide = $(link).prev('div');
    $(divToHide).hide() // this doesn't work
    //$('#test_fields').hide(); //this works
}

尝试替换如下链接：

<a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields($(this))">Remove Ingredient</a>

我不确定。但也许这就是问题所在。因为我记得我以前对"这个"有过问题，当我更换它时，它就完成了任务。

您可以尝试.closest（）和.find（）TR

function remove_fields(link) {
   $(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1'); 
    var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');
    $(div_to_hide).hide();
    //$('#test_fields').hide(); //this works
}

不能使用.val()更改隐藏输入的"value"属性。您需要使用：

$(link).prev("input[type=hidden]").attr('value', '1');

由于我真的不确定你想对这个输入做什么，我就这样算了。

.prev() fn仅结构中的前一个元素。由于input是<a>的前一个元素，所以不能像那样选择div。例如，您可以使用.siblings()。

$(link).siblings('div').hide();

如果您将代码分解为多个片段，它会变得更容易。

首先，我获取了"链接"，从中获取了它上面最近的div，然后我获取了输入。

我没有对您的代码做太多更改。

function remove_fields(link) 
{
    var $link =$(link);
    var $divToHide = $link.closest('div');
  
    $divToHide.find("input[type='hidden']").val('1');
    $divToHide.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-5">
        <div id="test_fields">
            <li id="test_input" class="string input optional stringish">
                 <label class="label" for="test_input">Ingredient name</label>
                 <input type="text" name="test_input" value="afsfasf" id="test_input">
             </li>
       </div>
       <input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
     <a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields(this)">Remove Ingredient</a>
        </div>
   </div>

相关文章：