Question

我正在尝试通过html进行解析，并希望将所有<h3>...</h3>放在<table>...</table>旁边，但是仅从<h3></h3><table></table>获得了第一个$('h3 + table', thecontents)。另外，如果我们想要根据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>

Answer 1

您要转换的代码或parse string to 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。

Answer 2

您可以使用next $("table").next("h3")将h3移到表格旁边，然后

$("table").next("h3").filter(function() {  
  return $(this).text().indexOf('Friday')!==-1
})

通过其文本filter 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和表，可以使用regex

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);

Answer 3

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

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

Answer 4

我希望你正在寻找 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" );

全选Jquery旁边的

4 个答案: