Jquery получает html или текст сразу после тега ввода внутри метки
У меня есть метка как
<label>
<input type = "checkbox" value = "160">160
</label>
или это может быть похоже на
<label>
<input type = "checkbox" value = "-160-"><del>160</del>
</label>
Теперь я пытаюсь:
var text = $(this).find('label').html();
Но это возвращает целое <input type = "checkbox" value = "-160-"><del>160</del>, чего я не хотел. Я также пытался использовать .text(), но текст также не возвращает тег <del> (т. е. возвращает только 160).
Я также пробовал с contents().eq(1), но безуспешно. Я хочу обрезать входной тег или получить все внутри тега метки и после входного тега
Ожидаемый результат:
<del>160</del> в случае <input type = "checkbox" value = "-160-"><del>160</del>
и
160 в случае
<input type = "checkbox" value = "160">160
какой результат вы хотите получить? вернуть <del> 160 </del>?
@Ankit, я не думаю, что он вернет тег del
@sergeykuznetsov Я добавил ожидаемый результат, надеюсь, это прояснит вас.
вам нужен тег del или текст тега del
@Ankit Я хочу, чтобы он был с тегом del, если он есть, то есть с тегом и текстом <del>160</del>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете получить каждый дочерний элемент html-тега, используя Node.childNodes, и вы можете работать с некоторым условием, какой тег вы хотите сохранить, а какой нет.
document.querySelectorAll("label").forEach(function(item) {
var _childNodes = item.childNodes;
for (var i = 0; i < _childNodes.length; i++) {
console.info(_childNodes[i].outerHTML);
}
})<label><input type = "checkbox" value = "-160-"><del>160</del></label>метка в html часто имеет атрибут for, например этот
<input id = "test" type = "checkbox" value = "160"><label for = "test">160</label>
тогда ваш javascript будет
console.info($("label[for='test']").text());
Вы можете найти следующий родственный узел input, а затем проверить, является ли он узлом HTML, и если да, вернуть outerHTML, в противном случае вернуть textContent узла.
function getContents(label) {
let next = $(label).find('input')[0].nextSibling;
while (!next.outerHTML && next.textContent.trim().length == 0) {
next = next.nextSibling;
}
return next.outerHTML ? next.outerHTML : next.textContent;
}
console.info(getContents('#div1 label'));
console.info(getContents('#div2 label'));<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "div1">
<label>
<input type = "checkbox" value = "160">160
</label>
</div>
<div id = "div2">
<label>
<input type = "checkbox" value = "-160-">
<del>160</del>
</label>
</div>... Я хочу обрезать входной тег или получить все внутри тега метки и после входного тега... что, если некоторые теги являются предыдущими братьями и сестрами?
@AbhishekPandey, но OP хочет, что после тега ввода
@Nick Здесь кажется, что все работает нормально, но в моем проекте вместо <del>160</del> отображается пустое любое предложение, где я должен проверить.
Возможно, у вас есть пробел перед тегом del?
Да Вот оно.
В этом случае первый узел после input является этим пробелом, поэтому он вернет его. Если это произойдет, вам, возможно, следует взглянуть на решение @AbhishekPandey, поскольку оно позволяет вам перебирать все дочерние узлы метки, а затем вы можете выбрать те, которые вам нужны.
В качестве альтернативы вы можете перебирать nextSibling, пока не найдете узел HTML или непустой текстовый узел, например. while (!next.outerHTML && next.textContent.trim().length == 0) next = next.nextSibling; Смотрите мою правку.
Попробуйте использовать это решение:
$('.labels label').each(function(i, el){
let $num = $(el).find('input')[0].nextSibling
if ($num.nodeType == 3) {
console.info($num.data);
}else {
console.info($num);
}
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "labels">
<label>
<input type = "checkbox" value = "-160-"><del>160</del>
</label>
<label>
<input type = "checkbox" value = "-160-">160
</label>
</div>
попробуйте этот var text = $(this).find('label, del').text();