jQuery找到最接近的ID并删除其中一个类名

Posted

技术标签:

【中文标题】jQuery找到最接近的ID并删除其中一个类名【英文标题】:jQuery find closest ID and remove one of the class names 【发布时间】:2017-07-12 14:07:02 【问题描述】:

大家好,我想知道如何找到 DIV 的下一个最接近的 ID,然后我需要替换 一个 > 它的类名 (class="something0 something1 something2")。

我必须处理的是这个 html

<div class="col-sm-10">
    <select class="tips form-control searchable-select-holder-req" data-tooltip="example 1" data-val="" id="environment" name="environment" style="width: 260px; display: none;">
        <option value="1">IT</option>
        <option value="2">FRASTRUCTURE</option>
        <option value="3">blah 2</option>
        <option value="4">blah 3</option>
        <option value="5">blah 4</option>
        <option value="6">blah 5</option>
        <option value="7">blah 6</option>
        <option value="8">SPARE</option>
        <option value="9">LAB</option>
        <option value="10">STUDY</option>
    </select>
    <div tabindex="0" class="searchable-select" style="width: 260px; min-width: 260px;">
        <div class="tips searchable-select-holder searchable-select-holder-req" data-tooltip="example 1" data-tag="environment"></div>
        <div class="searchable-select-dropdown">
            <span>Search:</span> 
            <input type="text" class="searchable-select-input" style="width: 250px; max-width: 185px; background-color: rgb(254, 231, 231);" />
            <div class="searchable-scroll has-next">
                <div class="searchable-has-privious searchable-select-hide">...</div>
                <div class="searchable-select-items mCustomScrollbar _mCS_2" style="font-family: Courier New, Courier, monospace;">
                    <div id="mCSB_2" class="mCustomScrollBox mCS-bodyScroll mCSB_vertical mCSB_inside" style="max-height: 185px;" tabindex="0">
                        <div id="mCSB_2_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
                          <div class="searchable-select-item" data-value=""></div>
                          <div class="searchable-select-item" data-value="1">IT</div>
                          <div class="searchable-select-item" data-value="2">FRASTRUCTURE</div>
                          <div class="searchable-select-item" data-value="3">blah 2</div>
                          <div class="searchable-select-item selected" data-value="4">blah 3</div>
                          <div class="searchable-select-item" data-value="5">blah 4</div>
                          <div class="searchable-select-item" data-value="6">blah 5</div>
                          <div class="searchable-select-item" data-value="7">blah 6</div>
                          <div class="searchable-select-item" data-value="8">SPARE</div>
                          <div class="searchable-select-item" data-value="9">LAB</div>
                          <div class="searchable-select-item" data-value="10">STUDY</div>
                        </div>
                        <div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-bodyScroll mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: block;">
                            <div class="mCSB_draggerContainer">
                                <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px; display: block; height: 104px; max-height: 175px;" oncontextmenu="return false;">
                                    <div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
                                </div>
                                <div class="mCSB_draggerRail"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="searchable-has-next">...</div>
            </div>
        </div>
    </div>
</div>

我目前正在代码的 data-tag="enviroment" 部分更改 inner text,我可以毫无问题地做到这一点。现在从那里我需要找到 mCSB_2_containerIDnext/closest div,然后在其中找到 DIV具有 selected 类并 将其删除 并将其放置在 first div 项(此处为空白值)上。 p>

这是我目前用来进入 **** 部分的 JS:

$("select").each(function() 
   $('[data-tag="' + this.id + '"]').text(''); //Clears Text
   //$(this).next('#mCSB_2_container').removeClass("selected");
);

正如您从代码中看到的那样,我尝试使用 $(this).next('#mCSB_2_container').removeClass("selected"); 但这似乎不起作用,因为它在 mCSB_2_container 中寻找类名 selected

任何帮助都可以解决这个问题!

【问题讨论】:

我在您的代码中没有看到任何select...但您将其定位在此处$("select").each(function() 更新了 OP 以显示选择部分。 好的。我已经为你添加了答案。 使用 id 时距离有何相关性?无论如何它必须是唯一的,所以不管它在哪里,它都应该是正确的元素?! 【参考方案1】:

您可以使用find() 查找所选课程,例如:$(this).next('.searchable-select').find('.selected').removeClass("selected");。请参阅下面的工作 sn-p:

$("select").each(function() 
  $('[data-tag="' + this.id + '"]').text(''); //Clears Text
  $(this).next('.searchable-select').find('.selected').removeClass("selected");
  $(this).next('.searchable-select').find('.searchable-select-item:first-child').addClass('selected');
);
.selected 
  background: #f00;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-10">
  <select class="tips form-control searchable-select-holder-req" data-tooltip="example 1" data-val="" id="environment" name="environment" style="width: 260px;">
        <option value="1">IT</option>
        <option value="2">INFRASTRUCTURE</option>
        <option value="3">blah</option>
        <option value="4">blah</option>
        <option value="5">blah</option>
        <option value="6">blah</option>
        <option value="7">blah</option>
        <option value="8">SPARE</option>
        <option value="9">LAB</option>
        <option value="10">STUDY</option>
    </select>
  <div tabindex="0" class="searchable-select" style="width: 260px; min-width: 260px;">
    <div class="tips searchable-select-holder searchable-select-holder-req" data-tooltip="example 1" data-tag="environment"></div>
    <div class="searchable-select-dropdown">
      <span>Search:</span>
      <input type="text" class="searchable-select-input" style="width: 250px; max-width: 185px; background-color: rgb(254, 231, 231);" />
      <div class="searchable-scroll has-next">
        <div class="searchable-has-privious searchable-select-hide">...</div>
        <div class="searchable-select-items mCustomScrollbar _mCS_2" style="font-family: Courier New, Courier, monospace;">
          <div id="mCSB_2" class="mCustomScrollBox mCS-bodyScroll mCSB_vertical mCSB_inside" style="max-height: 185px;" tabindex="0">
            <div id="mCSB_2_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
              <div class="searchable-select-item" data-value="">first item</div>
              <div class="searchable-select-item" data-value="1">IT</div>
              <div class="searchable-select-item" data-value="2">FRASTRUCTURE</div>
              <div class="searchable-select-item" data-value="3">blah 2</div>
              <div class="searchable-select-item selected" data-value="4">blah 3</div>
              <div class="searchable-select-item" data-value="5">blah 4</div>
              <div class="searchable-select-item" data-value="6">blah 5</div>
              <div class="searchable-select-item" data-value="7">blah 6</div>
              <div class="searchable-select-item" data-value="8">SPARE</div>
              <div class="searchable-select-item" data-value="9">LAB</div>
              <div class="searchable-select-item" data-value="10">STUDY</div>
            </div>
            <div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-bodyScroll mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: block;">
              <div class="mCSB_draggerContainer">
                <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px; display: block; height: 104px; max-height: 175px;" oncontextmenu="return false;">
                  <div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
                </div>
                <div class="mCSB_draggerRail"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="searchable-has-next">...</div>
      </div>
    </div>
  </div>
</div>

【讨论】:

现在将 first searchable-select-item 改为 selected 怎么样? 是的,你可以这样做。请参阅我的更新答案。请注意...您的代码中的第一项没有文本,因此请检查以查看添加的类。 是的,它做到了,lonut。感谢您的所有帮助!【参考方案2】:

我想也许你可以这样做。

$('.container').click(function(e) 
    e.preventDefault();
    var x = $(this).next().attr('id');
    $('.container').remove(x);
);
<a class="container" id="1" href="#">One</a>
<a class="container" id="2" href="#">Two</a>
<a class="container" id="3" href="#">Three</a>

【讨论】:

以上是关于jQuery找到最接近的ID并删除其中一个类名的主要内容,如果未能解决你的问题,请参考以下文章

在jquery中找到最接近的值

使用jQuery,如何删除没有ID或类名的select选项?

根据屏幕分辨率使用 jquery 添加 css 类名并删除 css 类名

删除列表中彼此接近的数字

找到最接近一组圆的点

如何从内联样式属性中获取值并将其放入最接近的输入值中? jQuery