嘿所有我想弄清楚如何找到 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”部分,以更改内部文本,我可以毫无问题地执行此操作。现在,我需要找到下一个/最近的 div ID mCSB_2_container ,然后在其中找到 DIV 有一个选择和删除它的类,并将其放在第一个 div项目(这里将是一个空白值)。
这是我现在用来进入****部分的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 中寻找班级名称已选择。
任何帮助都可以很好地解决这个问题!
答案 0 :(得分:1)
您可以使用find()
查找所选的类,如:$(this).next('.searchable-select').find('.selected').removeClass("selected");
。请参阅下面的工作代码:
$("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');
});
&#13;
.selected {
background: #f00;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
我想也许你可以做到这一点。
dmy
$('.container').click(function(e) {
e.preventDefault();
var x = $(this).next().attr('id');
$('.container').remove(x);
});