Question

我想遍历所有<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...-->

我的Java语言：

    $('.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)
        })
    })

预期结果是，我可以使用参数（Microsoft / https://www.microsoft.com）调用一次函数Start_To_Work_With_The_Result，然后在第二个循环中使用参数调用（Google / https://www.google.com）。

我该如何优雅地解决这个问题？

Answer 1

您的嵌套循环获取标题和链接的每种组合，而不仅仅是相关的对。

您应该只有一个循环，然后使用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.log(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>

Answer 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。

JS / jQuery-如何一次获取两个DIV内容的文本？

2 个答案: