JS / jQuery - Как мне получить текст сразу двух DIV-содержимого?
Я хочу перебрать все элементы <TD>, где я хочу записать Title и Link одного и того же элемента <TD> в двух переменных. Как я могу сделать это в JS / jQuery?
Мой HTML:
<td>
<div class = "class_Title row border-bottom" name = "name_Title" id = "id_Title">
<B>Microsoft</B>
</div>
<div class = "class_Link row" name = "name_Link" id = "id_Link">
https://www.microsoft.com
</div>
</td>
<td>
<div class = "class_Title row border-bottom" name = "name_Title" id = "id_Title">
<B>Google</B>
</div>
<div class = "class_Link row" name = "name_Link" id = "id_Link">
https://www.google.com
</div>
</td>
<!-- there are a lot of these...-->
Мой Javascript:
$('.class_Title').each(function(){
var str_CurrentTitle = '';
str_CurrentTitle= $(this).text().trim()
$('.class_Link').each(function(){
var str_CurrentLink = '';
str_CurrentLink= $(this).text().trim()
//call another function, to work with the result
Start_To_Work_With_The_Result(str_CurrentTitle, str_CurrentLink)
})
})
Ожидаемый результат: я могу вызвать функцию Start_To_Work_With_The_Result один раз с параметрами (Microsoft / https://www.microsoft.com) и во втором цикле с параметрами (Google / https://www.google.com).
Как я могу решить эту проблему элегантным способом?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что-то вроде следующего? Это будет проходить через все элементы td и получить нужные данные. Вместо вложенных циклов.
$('td').each(function(){
var str_CurrentTitle = $(this).children(".class_Title").text().trim();
var str_CurrentLink = $(this).children(".class_Link").text().trim();
//call another function, to work with the result
Start_To_Work_With_The_Result(str_CurrentTitle, str_CurrentLink)
})
Это предполагает, что все ваши элементы div, к которым вы хотите получить доступ в элементах td, имеют классы class_Title и class_Link.
это может не сработать, если есть также div, у которых нет классов OP, пустых ячеек или другого сконструированного содержимого ячеек
@thex Из-за того, что OP пытался использовать методы .each для каждого из этих классов, я предполагаю, что все div, к которым OP хочет получить доступ, имеют эти классы.
OP также имеет неправильный вложенный .each, поэтому я бы не стал предполагать слишком много, но в вашем решении нет ничего плохого.
@thex Хорошее замечание. И я считаю, что хороший ответ должен учитывать эти крайние случаи. Поэтому я просто добавил к своему ответу раздел, чтобы объяснить, что условие является обязательным для ответа.
что значит вложенный .each? И даже это, к сожалению, в моем случае код не работает. Можно ли указать td's с ID - чтобы убедиться, что только эти td находятся в цикле?
@EmbaBakar У вас есть .each внутри .each, что плохо для производительности и работает не так, как вы ожидаете. Is it possible to specify the td's with a ID - to make sure, that only these td are in the loop?. Я не понимаю, что вы имеете в виду. Вы имеете в виду ограничить это не всеми td?
@EmbaBakar вложенный означает, что в вашем случае вы повторяете каждую итерацию извлечения заголовка, а также каждую ссылку, что на самом деле не то, что вам нужно. Вам не нужен ID на вашем <td>
@CharlieFish Спасибо за информацию, теперь я понимаю, о чем вы. И да, я имею в виду, что это ограничивается тем, чтобы он не проходил через все td .
@EmbaBakar Вы можете добавить класс к каждому td. Затем вместо $('td').each вы бы сделали $('td.myclassname').each, заменив myclassname на имя класса, которое вы выбрали. Это выберет все элементы td с заданным именем класса.
@CharlieFish Большое спасибо - теперь я понял.
Ваши вложенные циклы получают каждую комбинацию заголовка и ссылки, а не только связанные пары.
У вас должен быть только один цикл, а затем использовать метод навигации DOM, чтобы получить элемент-брат.
$(".class_Title").each(function() {
var str_CurrentTitle = $(this).text().trim();
var link = $(this).siblings(".class_Link");
var str_CurrentLink = link.text().trim();
Start_To_Work_With_The_Result(str_CurrentTitle, str_CurrentLink);
});
function Start_To_Work_With_The_Result(title, link) {
console.info(title, link);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table><tr>
<td>
<div class = "class_Title row border-bottom" name = "name_Title" id = "id_Title">
<B>Microsoft</B>
</div>
<div class = "class_Link row" name = "name_Link" id = "id_Link">
https://www.microsoft.com
</div>
</td>
<td>
<div class = "class_Title row border-bottom" name = "name_Title" id = "id_Title">
<B>Google</B>
</div>
<div class = "class_Link row" name = "name_Link" id = "id_Link">
https://www.google.com
</div>
</td>
</tr></table>Ваш ответ точен, исходный JS не делает того, что должен делать.
Не работает. Результат - оба названия (Microsoft и Google). Я хотел бы сначала иметь заголовок, чем ссылку на заголовок.
@EmbaBakar, ты уверен, что не испортил код? мне кажется правильным
можно ли разместить jsfiddle?
Я добавил к ответу исполняемый фрагмент. Мне пришлось добавить вокруг него <table><tr>...</tr></table>, чтобы добиться хороших результатов.
Наверное, не следует повторно использовать свойства
idна одной странице. Свойство элемента DOMidдолжно быть уникальным для этой страницы.