Select all Next to with Jquery

user_8693062 0
Viewed 120

I'm trying to parse through html and would to get all <h3>...</h3> next to <table>...</table>, but have only gotten the first <h3></h3><table></table> from $('h3 + table', thecontents). Also, what if we wanted the h3 based on it's contents (ie. Friday, Dec. 14, Saturday, Dec. 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>");
    });
});

The contents of thecontents or data.contents is 

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

My current website returns required or $('h3 + table', thecontents).html()

<html>
<body id="hello">
<pre>
    <p></p>
    ...
    <p></p>
</pre>
</body>
</html>
html jquery javascript
4 Answers

Your code to convert or parse string to html is wrong, it should be like this

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

After parse to get h3 and table but the previous element of table should be h3 you can try this

$(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>");
  });
});

it using .outerHTML to get string like <h3>Title</h3> while .html() will return innerHTML or Title only.

user_4582140

You can use next $("table").next("h3") to get h3 next to the table and 

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

to filter the h3 by its text.

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>

EDIT:

as you want to get the hr and table with string you can use 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);

user_26308170

I have created a sample as below. This will add in the same document. You can change as per your need. 

<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

user_86324620

I hope you are looking for 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>

and in script you can get it by,

$( "li.third-item" ).next().css( "background-color", "red" );
user_20246910
Related