logo标签列表

使用Jquery选择所有Next元素

javascriptjqueryhtml
3
我正在尝试解析HTML，并希望获取所有与<table>...</table>相邻的<h3>...</h3>，但是只能从$('h3 + table', thecontents)中获取第一个<h3></h3><table></table>。另外，如果我们想根据其内容获取h3（例如：星期五，12月14日，星期六，12月15日等），该怎么办？
$( document ).ready(function() {
    $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('...') + '&callback=?', function(data){
        var thecontents = data.contents;
        var required = $('h3 + table', thecontents).html();
        $("#hello").html("<pre>" + required + "</pre>");
    });
});

thecontents或data.contents的内容是：

<html>
...
<h3><strong>Friday, Dec. 14</strong></h3>
<table>...</table>
...
<h3>...</h3>
<table>...</table>
</html>

我的当前网站返回required或者$('h3 + table'，thecontents).html()

<html>
<body id="hello">
<pre>
    <p></p>
    ...
    <p></p>
</pre>
</body>
</html>
看着“原始网站”的结构，你不想要每个“表格”的前一个h3（或标题）吗？ - Shidersz
@Shidersz 是的，我想要每个表格前面的上一个h3。 - HelloWorld
4个回答
1

你的代码转换或解析字符串为HTML的方式是错误的，应该像这样

var thecontents = $('<div></div>').html(data.contents)

解析后获取 h3 和 table，但是 table 的前一个元素应该是 h3，你可以尝试这样做。
$(document).ready(function() {
  $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('...') + '&callback=?', function(data) {
    var thecontents = document.createElement('html')
    thecontents.innerHTML = data.contents;
    var required = $(thecontents).find('h3 + table');

    var theResults = '';
    $.each(required, function(i, obj) {
      // .prev() used to get previous sibling or h3
      theResults += $(obj).prev()[0].outerHTML + '\n';
      // the table
      theResults += obj.outerHTML + '\n';
    })

    $("#hello").html("<pre>" + theResults + "</pre>");
  });
});

使用.outerHTML可以获取类似于<h3>Title</h3>的字符串，而.html()只会返回innerHTML或者仅仅是Title。
0
你可以使用 next $("table").next("h3") 来获取表格旁边的 h3 元素。
$("table").next("h3").filter(function() {  
  return $(this).text().indexOf('Friday')!==-1
})

通过其文本筛选h3。

console.log('finding text', $("table").next("h3").filter(function() {  
  return $(this).text().indexOf('Friday')!==-1
}).length);
console.log('next', $("table").next("h3").length);

console.log('prev', $("table").prev("h3").length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<table></table>
<h3>1</h3>
<table></table>
<h3>2</h3>
<table></table>
<h3><strong>Friday, Dec. 14</strong></h3>
<div></div>
</html>

编辑：

由于你想通过字符串获取 hr 和 table，因此可以使用正则表达式

var dataString = '<table></table> <h3>1</h3> <table></table> <h3>2</h3> <table></table> <h3><strong>Friday, Dec. 14</strong></h3> <div></div>';

var regExp = /<\s*h3[^>]*>(.*?)<\s*\/\s*h3>\s?<\s*table[^>]*>(.*?)<\s*\/\s*table>/g;
do {
    var m = regExp.exec(dataString);
    if (m) {
    debugger;
        console.log(m[0]);
    }
} while (m);

如果<h3>标签总是在<table>标签之前呢？ - HelloWorld
@HelloWorld，请检查我的代码片段。 - Just code
谢谢你之前的帮助。虽然我很难实现它。你会如何使用它来覆盖thecontents变量？ - HelloWorld
@HelloWorld 取决于你的 data.contents 中有什么？ - Just code
data.contents 是一个数组还是一个字符串？ - Just code
显示剩余8条评论
0

我已经创建了以下示例。这将添加在同一文档中。您可以根据需要进行更改。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>   
</head>

<body>
    <h3><strong>Friday, Dec. 14</strong></h3>
    <table></table>
    <h3><strong>Sunday, Dec. 14</strong></h3>
    <table></table>
    <h3><strong>SatFriday, Dec. 14</strong></h3>
    <table></table>
    <h3><strong>SatFriday, Dec. 14</strong></h3>
    <table></table>

    <div id="hello">

    </div>
</body>
</html>

<script>
    $(document).ready(function () {
        $('#hello').append('<pre>');
        $('#hello pre').append('<p>');
        $(document.body).find($('table')).each(function (a, b) {
            $('#hello pre p').append($(this).prev('h3').html()).append(b);
        });
    });
</script>

enter image description here

0

我希望你正在寻找https://api.jquery.com/next/

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

而在脚本中，您可以通过以下方式获取它：

$( "li.third-item" ).next().css( "background-color", "red" );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接